JavaScript метод Node.replaceChild()

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

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

Обратите внимание, что если элемент уже существует в дереве DOM, то он сначала будет удален, а затем вставлен взамен необходимого дочернего элемента.

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

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

JavaScript синтаксис:

parentNode.replaceChild(newChild, oldChild);

parentNode - Node
newChild - Node
oldСhild - Node

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

Document Object Model (DOM) Level 1

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

Параметр	Описание
newChild	Объект узла, который необходимо вставить взамен существующего. Если узел существует в дереве DOM, то он сначала будет удален, а затем вставлен. Обязательный параметр.
oldChild	Существующий дочерний узел, который должен быть заменен. Обязательный параметр.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование JavaScript метода .replaceChild()</title>
	</head>
	<body>
		<button onclick = "myFunc()">Replace</button> <!-- добавляем атрибут событий onclick -->
		<ul id = "first"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
		<script>
	function myFunc() {
	  const firstUl = document.getElementById("first"), // находим элемет по id
	        firstChild = firstUl.firstChild, // выбираем первый прямой дочерний узел указанного узла
	        newChild =  document.createElement("li"), // создаем новый элемент
	        text = document.createTextNode("New element"); // создаем новый текстовый узел
  
	  newChild.appendChild(text); // вставляем созданный текстовый узел в конец списка дочерних узлов родительского узла
	  firstUl.replaceChild(newChild, firstChild); // заменяем один дочерний узел указанного узла другим
	}
		</script>
	</body>
</html>

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

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

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

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

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование JavaScript метода .replaceChild() (удаление и вставка элемента)</title>
	</head>
	<body>
		<button onclick = "myFunc()">Replace</button> <!-- добавляем атрибут событий onclick -->
		<ul id = "first"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
		<script>
	function myFunc() {
	  const firstUl = document.getElementById("first"), // находим элемет по id
	        firstChild = firstUl.firstChild, // выбираем первый прямой дочерний узел указанного узла
	        lastChild = firstUl.lastChild; // выбираем последний прямой дочерний узел указанного узла
  
	  firstUl.replaceChild(firstChild, lastChild); // заменяем один дочерний узел указанного узла другим
	}
		</script>
	</body>
</html>

С использованием JavaScript метода getElementById() объекта Document выбирает элемент с определенным глобальным атрибутом id и инициализирует переменную этим значением.
С использованием свойства firstChild и lastChild выбирает первый и последний прямой дочерний узел элемента <ul> и инициализирует переменные этими значениями.
С использованием метода .replaceChild() заменяем один дочерний узел указанного узла другим (первый дочерний элемент элемента <ul> заменяем на последний). Обратите внимание на то, что при замене первый дочерний элемент сначала удаляется, а затем вставляется вместо последнего дочернего элемента.

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

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

JavaScript Node