JS InsertBefore: Руководство по использованию метода insertBefore в JavaScript

Метод insertBefore() в JavaScript используется для вставки нового элемента перед заданным элементом существующего дерева элементов DOM.

Синтаксис метода выглядит следующим образом:

parentNode.insertBefore(newNode, existingNode);

где:

• parentNode - элемент, перед которым должен быть вставлен новый элемент. Это родительский элемент, у которого будет вызываться метод insertBefore().
• newNode - элемент, который должен быть вставлен в дерево перед указанным existingNode.
• existingNode - существующий элемент, перед которым должен быть вставлен newNode.

Ниже приведены примеры кода:

Пример 1: Вставка нового элемента перед существующим элементом внутри родительского элемента.

javascript
// Создаем новый элемент
var newElement = document.createElement("p");
newElement.textContent = "Это новый абзац";
// Находим родительский элемент
var parentElement = document.getElementById("parent");
// Находим существующий элемент, перед которым нужно вставить новый элемент
var existingElement = document.getElementById("existing");
// Вставляем новый элемент перед существующим элементом внутри родительского элемента
parentElement.insertBefore(newElement, existingElement);

HTML-код для примера 1:

html

  
Это существующий абзац

В результате выполнения данного кода, новый абзац будет добавлен перед существующим абзацем, и структура DOM станет следующей:

html

  
Это новый абзац
  
Это существующий абзац

Пример 2: Вставка нового элемента перед первым элементом внутри родительского элемента.

javascript
// Создаем новый элемент
var newElement = document.createElement("p");
newElement.textContent = "Это новый абзац";
// Находим родительский элемент
var parentElement = document.getElementById("parent");
// Находим первый дочерний элемент родительского элемента
var firstChild = parentElement.firstChild;
// Вставляем новый элемент перед первым элементом внутри родительского элемента
parentElement.insertBefore(newElement, firstChild);

HTML-код для примера 2:

html

  
Это существующий абзац 1
  
Это существующий абзац 2

В результате выполнения данного кода, новый абзац будет добавлен перед первым существующим абзацем, и структура DOM станет следующей:

html

  
Это новый абзац
  
Это существующий абзац 1
  
Это существующий абзац 2

Таким образом, метод insertBefore() позволяет вставлять новые элементы перед заданными элементами в DOM-структуре.