Javascript insertAdjacent

insert adjacent und insert adjacent text

insertAdjacentElement funktioniert wie eine Kombination von insertBefore und appendChild, kann aber besser steuern, wo das neue Element eingefügt wird und ist einfacher zu handhaben als die verdrehte Syntax von insertBefore und appendChild.

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).
Elemente einfügen

insertAdjacentElement mit beforebegin und afterend

setzt ein neues Element als Previous Sibling (Vorgänger) bzw. Next Sibling (Nachfolger) ein.

Ein Element durch Klicken auswählen:




insertAdjacentElement mit afterbegin und beforeEnd

fügt ein neues Element als erstes Child Element bzw. letztes Child Element ein.

<div class="elem">
	<div> … </div>
	<div> … </div>
	<div> … </div>
	<div> … </div>
</div>

	

	

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 ist der String, der eingefügt werden soll.

insertAdjacentHTML ("position", htmlText)

insertAdjacentHTML parst zwar eingefügtes HTML, beeinflußt aber die vorhandene Elemente nicht (wandelt sie nicht in DOM-Elemente um) und ist darum schneller als innerHTML.

Javascript insertAdjacentHTML

insertAdjacentHTML so einfach.

<div id="boxnode">
    <h4>Javascript insertAdjacentHTML</h4>
    <p><em>insertAdjacentHTML</em> so einfach.</p>
</div>

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 green">beforebegin</p>');
node.insertAdjacentHTML('afterbegin','<p class="adjacent cyan">afterbegin</p>');
node.insertAdjacentHTML('beforeend','<p class="adjacent blue">beforeend</p>');
node.insertAdjacentHTML('afterend','<p class="adjacent purple">afterend</p>');

document.querySelector(".adjacent.cyan").innerHTML = "SURPRISE";
beforebegin afterend afterbegin beforeend