тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

Метод insertBefore

Метод insertBefore позволяет вставить элемент перед другим элементом. Чаще всего используется после создания элемента с помощью createElement. Метод применяется к родителю того элемента, перед которым произойдет вставка.

Синтаксис

родитель.insertBefore(элемент, перед кем вставить)

Пример

Создадим абзац и поместим его перед вторым абзацем:

<div id="parent"> <p>elem 1</p> <p id="before">elem 2</p> <p>elem 3</p> </div> let parent = document.querySelector('#parent'); let before = document.querySelector('#before'); let p = document.createElement('p'); p.innerHTML = '!'; parent.insertBefore(p, before);

Результат выполнения кода:

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

Пример

Добавим абзац в начало элемента #parent. Для этого вставим наш абзац перед первым потомком #parent. Этого потомка можно найти с помощью firstElementChild:

<div id="parent"> <p>elem 1</p> <p>elem 2</p> </div> let parent = document.querySelector('#parent'); let p = document.createElement('p'); p.innerHTML = '!'; parent.insertBefore(p, parent.firstElementChild);

Результат выполнения кода:

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

Пример

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

<div id="parent"></div> let parent = document.querySelector('#parent'); let p = document.createElement('p'); p.innerHTML = '!'; parent.insertBefore(p, parent.firstChild);

Результат выполнения кода:

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

Смотрите также

  • метод prepend,
    который вставляет элементы в начало
  • метод appendChild,
    который вставляет элементы в конец родителя
  • метод insertAdjacentElement,
    который вставляет элементы в заданное место