insertAdjacent
insertAdjacent gibt es in drei Variationen:
- insertAdjacentElement
- insertAdjacentText
- insertAdjacentHTML
Alle drei Methoden haben einen Parameter position , der die Position für das Einfügen bestimmt.
- beforebegin
- Fügt newElem direkt vor dem aktuellen Element (als previous sibling).
- afterend
- Fügt newElem direkt nach dem aktuellen Element ein (als next sibling).
- afterbegin
- Fügt newElem als erstes Kind des aktuellen Elements ein (als firstChild).
- beforeend
- Fügt newElem als letztes Kind des aktuellen Elements ein (als lastChild).
┌─── beforeBegin ▼ <ul> ▲ └─── afterBegin <li>hier spielt die Musik</li> ┌─── beforeEnd ▼ </ul> ▲ └─── afterEnd
Der zweite Parameter ist das einzufügende Element.
elem.insertAdjacentElement("position", newElem); // oder const inserted = elem.insertAdjacentElement("position", newElem);
insertAdjacentElement: beforebegin und afterend
setzt ein neues Element als previousSibling (Vorgänger) bzw. nextSibling (Nachfolger) ein.
Ein Element durch einen Klick auswählen:
insertAdjacentElement mit afterbegin und beforeEnd
fügt ein neues Element als erstes Child Element bzw. letztes Child Element ein.
Was mit insertAdjacentElement () eingefügt wird, wird zu einem neuen Element im DOM.
Weitere Methoden zum Einfügen neuer Elemente
insertAdjacentElement () ist flexibel, aber auch komplexer als appendChild (). Die modernen Browser unterstützen append und prepend, um Elemente ohne Umwege über das Parent-Element als childNode einzufügen und before und after, um Elemente als Siblings auf die selbe Ebene zu setzten.
Methode | Node-Objekte | Strings | Position |
---|---|---|---|
appendChild () | ein Node | Ende des Elements | |
insertBefore () | ein Node | vor einem Kind-Element des Eltern-Elements | |
insertAdjacent | ein Node | beforebegin afterbegin beforeend afterend |
|
append () | ein oder mehrere Nodes | Text-Strings | Als childNodes ans Ende des Elements |
prepend () | ein oder mehrere Nodes | Text-Strings | Als childNodes am Anfang des Elements |
before () | ein Node | Text-String | Als Sibling vor dem Element |
after () | ein Node | Text-String | Als Sibling nach dem Element |
Eigenschaft | Node-Objekte | Strings | Position |
innerHTML | DOM-Strings | ersetzt das vollständige Element |
Einfügen mit insertAdjacentHTML
insertAdjacentHTML fügt Text an einer der Positionen beforebegin, afterbegin, beforeend oder afterend ein. Das zweite Argument htmlText ist der String, der eingefügt werden soll, aber kann kein Node-Objekt sein.
insertAdjacentHTML ("position", htmlText)
insertAdjacentHTML parst zwar eingefügtes HTML, beeinflußt die vorhandene Elemente nicht (wandelt sie nicht in DOM-Elemente um) und ist darum schneller als innerHTML.
<h4>Javascript insertAdjacentHTML</h4> <p>beforebegin</p> <ul class="inserthtml"> <li>afterbegin</li> <li>HTML</li> <li>CSS</li> <li>Javascript</li> <li>beforeend</li> </ul> <p>afterend</p> <p></p>
insertAdjacentHTML wird von allen modernen Browsern (auch IE) unterstützt. position kann vier Werte für die Position relative zum Element annehmen:
- beforebegin Einfügen vor dem Element selbst.
- afterbegin Innerhalb des Elements, vor dem First Child
- beforeend Innerhalb des Elements, hinter dem Last Child.
- afterend Einfügen nach dem Element.
node.insertAdjacentHTML('beforebegin','<p class="adjacent">beforebegin</p>'); node.insertAdjacentHTML('afterbegin','<li class="adjacent">afterbegin</li>'); node.insertAdjacentHTML('beforeend','<li class="adjacent">beforeend</li>'); node.insertAdjacentHTML('afterend','<p class="adjacent">afterend</p>');
Warum nicht gleich innerHTML? Mit innerHTML werden alle Elemente innerhalb des Zielelements entfernt. insertAdjacentHTML fügt zusätzlichen Inhalt ein, aber berührt bereits existierende Elemente nicht. insertAjacent parst das Element, auf dem es aufgerufen wird, nicht erneut, und ist schneller als innerHTML, wo das Anhängen neuer Elemente jedesmal langsamer wird.