Javascript insertAdjacent

Element einfügen, insert adjacent html 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 merken als die verdrehte Syntax von insertBefore und appendChild.

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

elem.insertAdjacentElement("position", newElem);

Es gibt vier Werte für position:

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

Einfügen mit insertAdjacentHTML

insertAdjacentHTML ("position", htmlText)

insertAdjacentHTML parst einen String als HTML oder XML genauso wie innerHTML und fügt die gefundenen Knoten in den DOM-Baum an der Stelle insertionPoint ein. insertAdjacentHTML parst zwar das eingefügte HTML, beeinflußt aber die vorhandene Elemente nicht 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 8) 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>');
insert adjacent