JavaScript метод Node.appendChild()

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

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

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

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

Метод	Chrome	Firefox	Opera	Safari	IExplorer	Edge
`Node.appendChild()`	Да	Да	Да	Да	9.0	Да

JavaScript синтаксис:

parentElement.appendChild( childElement )

parentElement- Node
childElement - Node

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

Document Object Model (DOM) Level 3

Значения параметров

Параметр	Описание
childElement	Объект узла, который необходимо добавить в конец списка дочерних элементов указанного родительского узла. Обязательный параметр.

Исключения

Тип исключения	Описание
TypeError	Возникает в том случае, если значение аргумента не соответствует типу Node.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование JavaScript метода .appendChild()</title>
	</head>
	<body>
		<button onclick = "myFunc()">Append new element</button> <!-- добавляем атрибут событий onclick -->
		<ul id = "first"></ul>
		<script>
	function myFunc() {
	  const firstUl = document.getElementById( "first" ), // находим элемент по id
	        newElem = document.createElement( "li" ), // создаем новый пустой элемент <li>
	        text = document.createTextNode( "I\'m just a text" ); // создаем узел с текстовым содержимым
	  newElem.appendChild( text ); // добавляем узел с текстовым содержимым созданному элементу <li>
	  firstUl.appendChild( newElem ); // добавляем созданный элемент <li> элементу <ul>
	}
		</script>
	</body>
</html>

В этом примере с использованием атрибута событий onclick при нажатии на кнопку (HTML элемент <button>) вызываем функцию myFunc(), которая:

С использованием JavaScript метода getElementById() объекта Document выбирает элемент с определенным глобальным атрибутом id и инициализирует переменную этим значением.
С использованием JavaScript метода createElement() объекта Document создает новый пустой элемент <li>.
С использованием JavaScript метода createTextNode() объекта Document создает узел с текстовым содержимым.
С использованием метода .appendChild() объекта Node добавляем узел с текстовым содержимым созданному элементу <li>, а затем добавляем созданный элемент <li> элементу <ul>.

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

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

В следующем примере мы рассмотрим с Вами ситуацию при которой мы с помощью метода .appendChild() будем вставлять уже существующий элемент:

<!DOCTYPE html>
<html>
	<head>
		<title>Использование JavaScript метода .appendChild() (удаление и вставка элемента)</title>
	</head>
	<body>
		<button onclick = "myFunc()">Append to first Ul</button> <!-- добавляем атрибут событий onclick -->
		<button onclick = "myFunc2()">Append to second Ul</button> <!-- добавляем атрибут событий onclick -->
		<ul id = "first">
		      <li class = "first" style = "color: red">1</li>
		      <li>2</li>
		      <li>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.appendChild( activeLi ); // удаляем и вставляем элемент <li>
    	}
    	
    	function myFunc2() {
    	  secondUl.appendChild( activeLi ); // удаляем и вставляем элемент <li>
    	}
		</script>
	</body>
</html>

В этом примере с использованием атрибута событий onclick при нажатии на определенную кнопку (HTML элемент <button>) вызываем функции myFunc(), или myFunc2(), которые с использованием метода .appendChild() объекта Node сначала удаляют, а затем добавляют элемент <li> в определенный элемент <ul>.

Элемент <li> удаляется, а затем вставляется по той причине, что метод .appendChild() ссылается на один и тот же элемент <li>, а он не может по объективным причинам находится в нескольких родителях одновременно.

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

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

JavaScript Node