Javascript insertAdjacent

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);

Javascript insert Element before or after

insertAdjacentElement: beforebegin und afterend

setzt ein neues Element als previousSibling (Vorgänger) bzw. nextSibling (Nachfolger) ein.

Zuerst 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
insertAdjacentElement ()	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

Auch wenn die Methoden before und after in vielen Fällen einfacher sind, können sie nicht immer alle Positionen abdecken. insertAdjacentElement ist präziser.

insertAdjacentHTML ist effizienter, wenn viele HTML-Element in einem Schritt einzufügen sind. Das gilt auch für insertAdjacentText, wenn einfacher Text an einer bestimmten Position eingefügt werden soll, ohne dass er als HTML interpretiert wird.

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.