Метод replaceChild() в JavaScript
Метод replaceChild()
в JavaScript позволяет заменить один дочерний элемент другим внутри родительского элемента.
Синтаксис метода выглядит следующим образом:
parentNode.replaceChild(newNode, oldNode);
Где parentNode
— это родительский элемент, newNode
— новый дочерний элемент, который будет заменять старый дочерний элемент oldNode
.
Пример использования метода replaceChild()
:
<div id="parent">
<p id="child1">Это первый дочерний элемент</p>
<p id="child2">Это второй дочерний элемент</p>
</div>
<script>
const parent = document.getElementById('parent');
const oldNode = document.getElementById('child1');
const newNode = document.createElement('span');
newNode.textContent = 'Это новый элемент';
parent.replaceChild(newNode, oldNode);
</script>
В этом примере мы выбираем родительский элемент с id="parent"
. Затем мы выбираем дочерний элемент с id="child1"
, который мы хотим заменить новым элементом newNode
, созданным с помощью метода createElement()
. Мы устанавливаем текстовое содержимое для нового элемента с помощью свойства textContent
. Затем мы вызываем метод replaceChild()
на родительском элементе, чтобы заменить старый дочерний элемент на новый.
Важно отметить, что метод replaceChild()
изменяет исходное дерево DOM. Если вы хотите сохранить исходное дерево DOM, вам нужно сначала создать его копию с помощью метода cloneNode()
, а затем работать с копией.