Метад 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>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>

Глядзіце таксама