JavaScript/DOM/Node/insertBefore

Die Methode insertBefore fügt innerhalb eines Knotens einen Kindknoten vor einem anderen Kindknoten ein.

Syntax:

var insertedNode = parentNode.insertBefore(neuerKnoten, ReferenzKnoten);

• neuerKnoten: Element, das mit document.createElement() erzeugt wurde
• Referenzknoten: Knoten, vor den der neue Knoten eingefügt werden soll

Anwendungsbeispiel

Beispiel ansehen …

<p id="derText">Text <i id="derKursiveText">und mit kursivem Text</i></p>

Das Beispiel enthält einen Textabsatz mit Text und einem Kindelement ....

  function init() {
    var elem = 'b',
	text =  'mit fettem Text ',
	button = document.querySelector('button');
    button.addEventListener('click',function() {fügeKindknotenEin(elem,text);});
  }
 
  function fügeKindknotenEin(elem,text){
    var elemNeu = document.createElement(elem),
        elemText = document.createTextNode(text);
    elemNeu.appendChild(elemText);
    document.getElementById('derText').insertBefore(elemNeu, document.getElementById('derKursiveText'));
 }

In der Funktion init werden ein Element und ein Text der Variablen elem und text zugewiesen. Diese werden der Funktion fügeKindknotenEin(elem,text) als Parameter übergeben. In dieser Funktion wird zuerst mit document.createElement(elem) ein neues Element erzeugt. Dann wird der in der Variable text enthaltene Text mit document.createTextNode(text); als Textknoten erzeugt, der dann mit appendChild() als Inhalt des neu erzeugten Elements eingefügt wird. Der ganze Komplex aus b-Element mit Inhalt ist dann in der Variablen elemNeu gespeichert. Mit document.getElementById("derText") greift das Script sodann auf das p-Element zu und fügt mit insertBefore() das neue Element vor dem anderen Kindelement ein, das die Id "derKursiveText" hat. Am Ende lautet der komplette Inhalt des p-Elements dann: Text mit fettem Text und mit kursivem Text.

Wenn Sie einen Knoten nach einem bestimmten Kindknoten einfügen wollen, können Sie dazu ebenfalls insertBefore() verwenden. Geben Sie dazu als zweiten Parameter den Kindknoten an, der auf den Knoten folgt, nach dem der neue Knoten eingefügt werden soll. Dieser muss keine eigene ID haben, sondern Sie können ihn über nextSibling ausgehend vom vorigen Kindknoten ansprechen.

Beispiel ansehen …

  function FügeKindknotenEin(){
    var neuB = document.createElement('b');
    var neuBText = document.createTextNode(' und fettem');
    neuB.appendChild(neuBText);
    document.getElementById('derText').insertBefore(neuB,document.getElementById('derKursiveText').nextSibling);
  }

Das Beispiel funktioniert weitestgehend wie das erste, der Text "und fettem" wird jedoch nach dem i-Element eingefügt, sodass das p-Element am Ende Text mit kursivem und fettem Text enthält. Als zweiter Parameter für insertBefore() wird document.getElementById("derKursiveText").nextSibling übergeben. Dies ist der nächstfolgende Knoten nach dem i-Element, also der Textknoten mit dem Inhalt " Text". Vor diesem Knoten wird das neu erzeugte b-Element eingefügt. Somit wird es nach dem i-Element und vor dem darauffolgenden Knoten eingefügt.

Beachten Sie: Wenn auf einen Knoten keine weiteren Kindknoten folgen, hat die Eigenschaft nextSibling den Wert null. Dies passt in diesem Fall, denn der zweite Parameter von insertBefore() kann auch null sein. In diesem Fall funktioniert insertBefore() genauso wie appendChild(): Der neue Knoten wird nach allen anderen Kindknoten, also ans Ende der Liste der Kindknoten eingefügt.

Weblinks

• W3C: insertBefore
• MDN: Node.insertBefore