Метод insertBefore

Методът insertBefore позволява да се вмъкне елемент преди друг елемент. Най-често се използва след създаване на елемент с помощта на createElement. Методът се прилага към родителя на елемента, преди който ще се извърши вмъкването.

Синтаксис

javascriptродител.insertBefore(елемент, преди който да се вмъкне);

Пример

Нека създадем параграф и го поставим преди втория параграф:

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

Резултат от изпълнението на кода:

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

Пример

Нека добавим параграф в началото на елемента #parent. За целта ще вмъкнем нашия параграф преди първото дъщерно подчинение на #parent. Това подчинение може да бъде намерено с помощта на firstElementChild:

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

Резултат от изпълнението на кода:

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

Пример

При подаване на втори параметър null методът insertBefore действа като appendChild. В същото време, ако елементът няма дъщерни елементи, firstElementChild връща null. Следователно, добавянето в началото на елемент е възможно дори когато в него няма дъщерни елементи:

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

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

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

parent.insertBefore(p, parent.firstChild);

Резултат от изпълнението на кода:

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

Вижте също