Есть желание присоединиться к интересным IT проектам? Смотри открытые вакансии.

JavaScript метод Node.replaceChild()

JavaScript Node

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

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


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


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

МетодChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
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 метода .replaceChild()
Пример использования 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>

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

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

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

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

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

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