Javascript insertAdjacent

insertAdjacentElement

Für das Einfügen von Elementen in das DOM gibt es Methoden wie insertBefore oder appendChild mit dem Umweg über das Parent-Element. insertAdjacentElement hängt Elemente ohne großen Umweg über ein Parent Element ein.

elem.insertAdjacentElement("position", newElem);

position ist ein String, der einen von vier Werten annahmen kann:

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

insertAdjacentElement: beforebegin und afterend

setzt ein neues Element als Previous Sibling (Vorgänger) bzw. Next Sibling (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.

<ul class="elem">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

Was mit insertAdjacentElement eingefügt wird, wird zu einem neuen Fragment im DOM.

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