Resumo : neste tutorial você aprenderá como usar o Node.replaceChild()método JavaScript para substituir um elemento HTML por um novo.
Para substituir um elemento HTML, você usa o node.replaceChild()método:
parentNode.replaceChild(newChild, oldChild);
Linguagem de código: CSS ( css )Neste método, newChildé o novo nó a substituir o oldChildnó que é o antigo nó filho a ser substituído.
Suponha que você tenha a seguinte lista de itens:
<ul id="menu">
<li>Homepage</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
Linguagem de código: HTML, XML ( xml )O exemplo a seguir cria um novo elemento de item de lista e substitui o primeiro elemento de item de lista no menu pelo novo:
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);
Linguagem de código: JavaScript ( javascript )Junte tudo.
<!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>Linguagem de código: HTML, XML ( xml )Resumo
- Use
Node.replaceChild()para substituir um elemento filho de um nó por um novo elemento.
Anterior
Próximo
