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.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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).
Javascript insert Element before or after

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