JavaScript метод Node.insertBefore()

JavaScript Node

Определение и применение

JavaScript метод .insertBefore() объекта Node позволяет вставить необходимый узел перед заданным узлом в качестве дочернего узла указанного родительского узла.


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

Если ссылочный узел соответствует значению null, то указанный узел будет добавлен в конец списка дочерних узлов родительского узла.


Если вставляемый узел является узлом фрагмента Document­Fragment, то в указанную позицию вставляется не сам узел, а все его дочерние узлы, в исходном порядке следования.

Поддержка браузерами

МетодChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
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.

Результат нашего примера:

Пример использования JavaScript метода .insertBefore()
Пример использования JavaScript метода .insertBefore()

В следующем примере мы рассмотрим с Вами ситуацию при которой мы с помощью метода .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 метода .insertBefore() (удаление и вставка элемента)
Пример использования JavaScript метода .insertBefore() (удаление и вставка элемента)
JavaScript Node
×

Кажется, вы используете блокировщик рекламы :(

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.