JavaScript: Jak dodać element do DOM względem innego elementu?

Dodawanie elementu obok innego

Metoda insertAdjacentElement pozwala na dodanie elementu względem już istniejącego w drzewie DOM. Za pomocą niej możesz dodać nowy element "przed" lub "za" już istniejącym.

Wywodzi się ona z interfejsu: Element. Żeby ją wywołać, musisz posiadać referencję do już istniejącego elementu w DOM.

Przykład:

HTML:

<div id="content">Some content</div>

Załóżmy, że chcesz dodać nowy element "za" elementem o id: content.

JavaScript:

const contentEl = document.getElementById('content');
const newElement = document.createElement('div');
newElement.innerText = 'New element';

content.insertAdjacentElement('afterend', newElement);

Wynik:

HTML:

<div id="content">Some content</div>
<div>New element</div>

Metoda insertAdjacentElement przyjmuje dwa parametry.

Pierwszy parametr to pozycja, w której ma zostać umieszczony element obok istniejącego. Przyjmuje następujące wartości:

1. beforebegin — Doda nowy element "przed"
2. afterbegin — Doda nowy element w środku "przed" pierwszym elementem dzieckiem
3. beforeend — Doda nowy element w środku "za" ostatnim elementem dzieckiem
4. afterend — Doda nowy element "za"

Najlepiej to zilustruje następujący przykład:

<!-- beforebegin -->
<div>
  <!-- afterbegin -->
  Some content
  <!-- beforeend -->
</div>
<!-- afterend -->

Drugi parametr to element, który ma zostać dodany.