JavaScript метод Node.insertBefore()
JavaScript NodeОпределение и применение
JavaScript метод .insertBefore() объекта Node позволяет вставить необходимый узел перед заданным узлом в качестве дочернего узла указанного родительского узла.
Обратите внимание, что если вставляемый дочерний элемент является ссылкой на существующий узел в документе, то метод .insertBefore() перемещает его из текущей позиции в новую позицию. Это означает, что узел не может находиться в двух точках документа одновременно, поэтому, если у узла уже есть родитель, узел сначала удаляется, а затем вставляется в новую позицию.
Если ссылочный узел соответствует значению null, то указанный узел будет добавлен в конец списка дочерних узлов родительского узла.
Если вставляемый узел является узлом фрагмента DocumentFragment, то в указанную позицию вставляется не сам узел, а все его дочерние узлы, в исходном порядке следования.
Поддержка браузерами
Метод | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
---|---|---|---|---|---|---|
Node.insertBefore() | Да | Да | Да | Да | 9.0 | Да |
JavaScript синтаксис:
parentNode.insertBefore( newNode, referenceNode); parentNode - Node newNode - Node referenceNode - Node
Спецификация
Document Object Model (DOM) Level 1Значения параметров
Параметр | Описание |
---|---|
newNode | Узел, который требуется вставить. Обязательный аргумент. |
referenceNode | Дочерний узел, перед которым необходимо вставить новый узел. Если задано значение null, то новый узел будет добавлен в конец списка дочерних узлов родительского узла. Является ошибкой передавать в аргументе ссылочный узел, который не является дочерним по отношению к родительскому узлу. Обязательный аргумент |
Пример использования
<!DOCTYPE html> <html> <head> <title>Использование JavaScript метода .insertBefore()</title> </head> <body> <button onclick = "myFunc()">referenceNode = li</button> <!-- добавляем атрибут событий onclick --> <button onclick = "myFunc2()">referenceNode = null</button> <!-- добавляем атрибут событий onclick --> <ul id = "first"> <li class = "list-item">Элемент списка</li> </ul> <script> const firstUl = document.getElementById("first"), // находим элемет по id li = document.querySelector(".list-item"); // находим первый элемет с указанным классом function myFunc() { const newElem =document.createElement("li"), // создаем новый элемент <li> text = document.createTextNode("I\'m inserted before"); // создаем узел с текстовым содержимым newElem.appendChild( text ); // добавляем текстовое содержимое созданному элементу firstUl.insertBefore( newElem, li); // вставляем созданный узел перед заданным узлом в качестве дочернего узла указанного родительского узла } function myFunc2() { const newElem =document.createElement("li"), // создаем новый элемент <li> text = document.createTextNode("I\'m inserted at the end of the list of child nodes"); // создаем узел с текстовым содержимым newElem.appendChild( text ); // добавляем текстовое содержимое созданному элементу firstUl.insertBefore( newElem, null); // вставляем созданный узел в конец списка дочерних узлов родительского узла } </script> </body> </html>
В этом примере с использованием атрибута событий onclick при нажатии на определенную кнопку (HTML элемент <button>) вызываем функцию myFunc(), или myFunc2().
В первом случае мы с помощью метода .insertBefore() вставляем созданный узел перед заданным узлом в качестве дочернего узла указанного родительского узла, а во втором вставляем созданный узел в конец списка дочерних узлов родительского узла, передав в качестве значения второго аргумента значение null.
Результат нашего примера:
В следующем примере мы рассмотрим с Вами ситуацию при которой мы с помощью метода .insertBefore() будем вставлять уже существующий элемент:
<!DOCTYPE html> <html> <head> <title>Использование JavaScript метода .insertBefore() (удаление и вставка элемента)</title> </head> <body> <button onclick = "myFunc()">Insert before first child first Ul</button> <!-- добавляем атрибут событий onclick --> <button onclick = "myFunc2()">Insert before first child second Ul</button> <!-- добавляем атрибут событий onclick --> <ul id = "first"> <li>1</li> <li>2</li> <li class = "first" style = "color: red">3</li> </ul> <ul id = "second"> <li>1</li> <li>2</li> </ul> <script> const firstUl = document.getElementById( "first" ), // находим элемент по id secondUl = document.getElementById( "second" ), // находим элемент по id activeLi = document.getElementsByClassName( "active" )[0], // находим элементы с определенным классом function myFunc() { firstUl.insertBefore( activeLi, firstUl.firstChild ); // удаляем и вставляем элемент <li> перед заданным узлом в качестве дочернего узла указанного родительского узла } function myFunc2() { secondUl.insertBefore( activeLi, secondUl.firstChild ); // удаляем и вставляем элемент <li> перед заданным узлом в качестве дочернего узла указанного родительского узла } </script> </body> </html>
В этом примере с использованием атрибута событий onclick при нажатии на определенную кнопку (HTML элемент <button>) вызываем функции myFunc(), или myFunc2(), которые с использованием метода .insertBefore() объекта Node сначала удаляют, а затем добавляют элемент <li> перед заданным узлом, который является первым дочерним элементом родительского узла в качестве дочернего узла в определенном элементе <ul>.
Элемент <li> удаляется, а затем вставляется по той причине, что метод .insertBefore() ссылается на один и тот же элемент <li>, а он не может по объективным причинам находится в нескольких родителях одновременно.
Результат нашего примера:
JavaScript Node