Метод Node: insertBefore()

Базовая поддержка Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

Метод insertBefore() интерфейса Node вставляет узел перед ссылочным узлом в качестве дочернего элемента указанного родительского узла.

Если данный узел уже существует в документе, insertBefore() перемещает его из текущего положения в новое положение. (То есть он будет автоматически удален из своего существующего родителя перед добавлением к указанному новому родителю.)

Это означает, что узел не может находиться в двух местах документа одновременно.

Примечание: Метод Node.cloneNode() можно использовать для создания копии узла перед добавлением его в новый родительский элемент. Обратите внимание, что копии, созданные с помощью cloneNode(), не будут автоматически синхронизироваться.

Если заданный дочерний элемент является DocumentFragment, все содержимое DocumentFragment перемещается в список дочерних элементов указанного родительского узла.

Синтаксис

insertBefore(newNode, referenceNode)

Параметры

newNode: Узел, который необходимо вставить.
referenceNode: Узел, перед которым вставляется newNode. Если это null, то newNode вставляется в конец дочерних узлов.

Примечание: referenceNode не является необязательным параметром. Вы должны явно передать Node или null. Отсутствие параметра или передача недопустимых значений может привести к поведению различающемуся в разных версиях браузера.

Возвращаемое значение

Возвращает добавленный дочерний элемент (если newNode является DocumentFragment, в этом случае возвращается пустой DocumentFragment).

Исключения

Проверка корректности вставки

Пример

Пример 1

<div id="parentElement">
  <span id="childElement">foo bar</span>
</div>

<script>
  // Create the new node to insert
  const newNode = document.createElement("span");

  // Get a reference to the parent node
  const parentDiv = document.getElementById("childElement").parentNode;

  // Begin test case [ 1 ] : Existing childElement (all works correctly)
  let sp2 = document.getElementById("childElement");
  parentDiv.insertBefore(newNode, sp2);
  // End test case [ 1 ]

  // Begin test case [ 2 ] : childElement is of Type undefined
  sp2 = undefined; // Non-existent node of id "childElement"
  parentDiv.insertBefore(newNode, sp2); // Implicit dynamic cast to type Node
  // End test case [ 2 ]

  // Begin test case [ 3 ] : childElement is of Type "undefined" (string)
  sp2 = "undefined"; // Non-existent node of id "childElement"
  parentDiv.insertBefore(newNode, sp2); // Generates "Type Error: Invalid Argument"
  // End test case [ 3 ]
</script>

Пример 2

<div id="parentElement">
  <span id="childElement">foo bar</span>
</div>

<script>
  // Create a new, plain <span> element
  let sp1 = document.createElement("span");

  // Get the reference element
  let sp2 = document.getElementById("childElement");
  // Get the parent element
  let parentDiv = sp2.parentNode;

  // Insert the new element into before sp2
  parentDiv.insertBefore(sp1, sp2);
</script>

Примечание: Нет метода insertAfter(). Его можно эмулировать, объединив метод insertBefore с Node.nextSibling.

В предыдущем примере, sp1 можно вставить после sp2 с помощью:

parentDiv.insertBefore(sp1, sp2.nextSibling);

Если у sp2 нет следующего дочернего элемента, то он должен быть последним дочерним элементом — sp2.nextSibling возвращает null, и sp1 вставляется в конец списка дочерних узлов (непосредственно после sp2).

Пример 3

Вставка элемента перед первым дочерним элементом, используя свойство firstChild.

// Get the parent element
let parentElement = document.getElementById("parentElement");
// Get the parent's first child
let theFirstChild = parentElement.firstChild;

// Create a new element
let newElement = document.createElement("div");

// Insert the new element before the first child
parentElement.insertBefore(newElement, theFirstChild);

Если у элемента нет первого дочернего элемента, то firstChild является null. Элемент по-прежнему добавляется к родителю после последнего дочернего элемента.

Поскольку у родительского элемента не было первого дочернего элемента, у него также не было последнего дочернего элемента. Следовательно, вставленный элемент является единственным элементом.

Спецификации

Спецификация
DOM # dom-node-insertbefore

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`insertBefore`	1	12	1	7	1.1	18	4	10.1	1	1.0	4.4

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore