über JavaScript Elemente nachträglich im DOM hinzufügen

In den letzten Kapiteln haben wir über innerHTML auf einer Seite Elemente hinzugefügt. Das hat den Vorteil, dass es sehr einfach realisierbar ist. Der Nachteil ist allerdings, dass ein Element vorhanden sein muss, das man ersetzen bzw. füllen kann.

Mit JavaScript gibt es auch Möglichkeiten direkt in das DOM einer Website einzugreifen. Zur Erinnerung: das DOM stellt die Knotenpunkte einer HTML-Seite mit allen Einzelelementen dar. Auf diese kann man dadurch gezielt zugreifen, diese ersetzen oder auch danach bzw. davor etwas einfügen.

Erster Schritt ist, dass man in JavaScript ein Objekt erzeugt. Wir wollen ein neuen Link einfügen.

var einzufuegendesObjekt = document.createElement("a");

Bisher passiert noch nichts Sichtbares.

Hier wird nur der Elemententyp angegeben! Weitere Eigenschaften werden nun zugefügt.

var einzufuegendesObjekt = document.createElement("a");
einzufuegendesObjekt.href = "http://www.html-seminar.de";
einzufuegendesObjekt.innerHTML = "Tutorial für HTML, CSS und JavaScript";
einzufuegendesObjekt.style.backgroundColor = "#FFFF00";

Es passiert immer noch nichts, außer das wir ein Element erzeugt haben. Jetzt müssen wir es noch in unser DOM verankern. Sprich sagen, wohin das Teil gepackt werden soll.

Dazu gibt es:

appendChild(dasNeueObjekt)
insertBefore(dasNeueObjekt, BezugsObjekt)

Element für das Verankern bestimmen

Das bereits vorhandene Objekt müssen wir nun festlegen. Dazu können wir auf die bekannten Möglichkeiten über GetElementById oder GetElementByName zurückgreifen.

Wenn es einfach ganz unten im <body> angehängt werden soll:

document.body.appendChild(einzufuegendesObjekt);

Soll es nach dem DIV mit der id="box1" angehängt werden:

var vorhandenesObjekt = document.getElementById("box1");
vorhandenesObjekt.appendChild(einzufuegendesObjekt);

oder davor, es soll vor dem DIV mit der id="box1" gehängt werden:

var vorhandenesObjekt = document.getElementById("box1");
vorhandenesObjekt.insertBefore(einzufuegendesObjekt);

head-Bereich erweitern

Beispiel: es soll der Google +1 Link innerhalb des <head>-Bereich nach dem <script>-Bereich eingefügt werden.

var neuesScript = document.createElement("script");
neuesScript.type = "text/javascript";
neuesScript.src = "https://apis.google.com/js/plusone.js";
neuesScript.innerHTML = "{lang: 'de'}";
var s = document.getElementsByTagName('script')[0];
s.parentNode.appendChild(neuesScript, s);

Hier bedeutet getElementsByTagName('script')[0] das erste script-Element - deshalb die Klammer mit 0.

Kontrolle des Quellcodes

Sobald wir das DOM per JavaScript ergänzen, können wir nicht mehr einfach Quellcode einer Website ansehen. Dieser sieht wie gehabt nach dem ausliefern aus. Hier kommt nun Firebug im Firefox oder das eingebaute Tool im Google Chrome zum Zuge. In Chrome F12 drücken und dann den ersten Reiter mit Elements. Dort sieht man auch sehr schön, wenn neuer Code dazukommt.

Weiterempfehlen • Social Bookmarks • Vielen Dank

Vorwort

Bitte unterstützen

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Vielen Dank für Ihre Hilfe

E-Books zum Kurs
von HTML-Seminar.de
E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

Mehr Details