В этом руководстве вы узнаете, как использовать метод JavaScript Node.replaceChild() для замены элемента HTML новым.
Чтобы заменить элемент HTML, используйте метод node.replaceChild() :
parentNode.replaceChild(newChild, oldChild);
В этом методе newChild — это новый узел для замены узла oldChild, который является заменяемым старым дочерним узлом.
Предположим, что у вас есть следующий список элементов:
<ul id="menu">
<li>Homepage</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
В следующем примере создается новый элемент списка и заменяется первый элемент списка в меню новым:
let menu = document.getElementById('menu');
// create a new node
let li = document.createElement('li');
li.textContent = 'Home';
// replace the first list item
menu.replaceChild(li, menu.firstElementChild);
Обобщим все это в коде.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript DOM: Replace Elements</title>
</head>
<body>
<ul id="menu">
<li>Homepage</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<script>
let menu = document.getElementById('menu');
// create a new node
let li = document.createElement('li');
li.textContent = 'Home';
// replace the first list item
menu.replaceChild(li, menu.firstElementChild);
</script>
</body>
</html>