JavaScript - DOM-Elemente einfügen

document.createElement()S.803 Das umfassende Referenzwerk

Erzeugt einen neuen Element-Knoten

Überblick

  • Element createElement(String tagName)

Argumente

  • tagName

    Der Tag-Name des zu erzeugenden Elements. Bei XML auf Groß- Kleinschreibung achten.

Rückgabewert

Ein neu erzeugter HTML-Knoten mit dem angegebenen Tag-Namen.

Exeptions

Die Methode löst eine DOMException mit dem code INVALID_CHARACTER_ERR aus, wenn tagName ein unzulässiges Zeichen enthält.

document.createTextNode() S.808 Das umfassende Referenzwerk

Erzeugt eienen neuen Text-Knoten

Überblick

  • Text createTextNode(String daten)

Argumente

  • daten

    Der Inhalt des text-Knotens.

Rückgabewert

Ein neu erzeugter Text-Knoten, der den angegebenen daten-String repräsentiert.

Node.appendChild() S.902 Das umfassende Referenzwerk

Fügt einen Knoten als letztes Kind eines Knoten ein

Überblick

  • Node appendChild(Node neuesKind)

Argumente

  • neuesKind

    Der Knoten, der in das Dokument eingefügt werden soll. Wenn der Knoten ein Dokument-Fragment ist, wird nicht er selbst sondern werden seine Kinder eingefügt.

Rückgabewert

Der hinzugefügte Knoten.

Node.insertBefore() S.904 Das umfassende Referenzwerk

Fügt einen Knoten vor dem angegebenen Knoten in den Dokumentenbaum ein

Überblick

  • Node insertBefore(Node neuesKind, Node refKind)

Argumente

  • neuesKind

    Der Knoten, der in den Baum eingefügt werden soll. Wenn es ein Dokument-Fragment ist, werden satt seiner selbst sondern seine Kinder eingefügt.

  • refKind

    Das Kind dieses Knotens, vor dem neuesKind eingefügt werden soll. Wenn dieses Argument null ist, wird neuesKind als letztes Kind dieses Knoten eingefügt.

Rückgabewert

Der eingefügte Knoten.

HTML-Elemente erzeugen und einfügen

Beispiel:

<script type="text/javascript">

window.onload = function() {

document.getElementById("Absatz").innerHTML="Dieser Text wird von JavaScript eingefügt!";

// Gibt einen Text in einem vorhandenen HTML-Tag aus

var absatzNeu = document.createElement("p");

// Erzeugt einen <p>-Tag

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

// Erzeugt einen <a>-Tag

verweis.setAttribute("href", "http:www.just-design.de");

// Fügt dem <a>-Tag das Attribut "href" an

var verweisText = document.createTextNode("just design");

// Erzeugt einen Text-Knoten

verweis.appendChild(verweisText);

// Text-Knoten wird als Kind an das <a>-Tag angehängt

absatzNeu.appendChild(verweis);

// verweis-Knoten wird als Kind an das <p>-Tag angehängt

document.getElementById("ausgabe").appendChild(absatzNeu);

// Dem div-Element mit id="ausgabe" wird als Kind das <p>-Tag angehängt

var ueberschrift = document.createElement("h4");

// Erzeugt einen <h4>-Tag

var ueberschriftText = document.createTextNode("Diese h4-Überschrift wird von JavaScript erzeugt!");

// Erzeugt einen Text-Knoten

ueberschrift.appendChild(ueberschriftText);

// Text-Knoten wird als Kind an das <h4>-Tag angehängt

document.getElementById("ausgabe").insertBefore(ueberschrift, document.getElementById("Absatz"));

// Dem div-Element mit id="ausgabe" wird als Kind das <h4>-Tag eingefügt vor dem p-Element mit der id="Absatz"

}

</script>

document.getElementsByTagName("body")[0].appendChild(verweis);

//Würde den Link an letzter Position im body einfügen

Ausgabe:

// wenn alles schön in Tags in den Baum eingebunden ist, klappt das auch!

zurück