Methode insertBefore

Die Methode insertBefore ermöglicht das Einfügen eines Elements vor einem anderen Element. Am häufigsten wird sie verwendet, nachdem ein Element mit createElement erstellt wurde. Die Methode wird auf das übergeordnete Element des Elements angewendet, vor dem die Einfügung erfolgen soll.

Syntax

javascriptElternelement.insertBefore(Element, vor welchem eingefügt werden soll);

Beispiel

Erstellen wir einen Absatz und platzieren ihn vor dem zweiten Absatz:

html<div id="parent">
  <p>Elem 1</p>
  <p id="before">Elem 2</p>
  <p>Elem 3</p>
</div>

javascriptlet parent = document.querySelector('#parent');
let before = document.querySelector('#before');

let p = document.createElement('p');
p.textContent = '!';

parent.insertBefore(p, before);

Ergebnis der Codeausführung:

html<div id="parent">
  <p>Elem 1</p>
  <p>!</p>
  <p>Elem 2</p>
  <p>Elem 3</p>
</div>

Beispiel

Fügen wir einen Absatz am Anfang des Elements #parent hinzu. Dazu fügen wir unseren Absatz vor dem ersten Kindelement #parent ein. Dieses Kindelement kann mit firstElementChild gefunden werden:

html<div id="parent">
  <p>Elem 1</p>
  <p>Elem 2</p>
</div>

javascriptlet parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.insertBefore(p, parent.firstElementChild);

Ergebnis der Codeausführung:

html<div id="parent">
  <p>!</p>
  <p>Elem 1</p>
  <p>Elem 2</p>
</div>

Beispiel

Wenn null als zweiter Parameter übergeben wird, verhält sich die Methode insertBefore wie appendChild. Gleichzeitig gibt firstElementChild null zurück, wenn das Element keine untergeordneten Elemente hat. Folglich kann man auch am Anfang eines Elements Elemente hinzufügen, selbst wenn es keine untergeordneten Elemente enthält:

html<div id="parent"></div>

javascriptlet parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.insertBefore(p, parent.firstChild);

Ergebnis der Codeausführung:

html<div id="parent">
  <p>!</p>
</div>

Siehe auch