Para substituir um elemento DOM na árvore DOM, siga estas etapas:
- Primeiro, selecione o elemento DOM que deseja substituir.
- Em seguida, crie um novo elemento .
- Finalmente, selecione o elemento pai do elemento de destino e substitua o elemento de destino pelo novo elemento usando o
replaceChild()método.
Veja o seguinte documento HTML:
<html>
<head>
<title>Replace a DOM element</title>
</head>
<body>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/service">Service</a></li>
<li><a href="/about">About</a></li>
</ul>
<script src="js/app.js"></script>
</body>
</html>Linguagem de código: HTML, XML ( xml )Para selecionar o último elemento do item da lista, siga as etapas acima:
Primeiro, selecione o último item da lista usando o método querySelector():
const listItem = document.querySelector("li:last-child");Linguagem de código: JavaScript ( javascript )Segundo, crie um novo elemento de item de lista:
const newItem = document.createElement('li');
newItem.innerHTML = '<a href="/products">Products</a>';Linguagem de código: JavaScript ( javascript )Finalmente, obtenha o pai do elemento alvo e chame o método replaceChild():
listItem.parentNode.replaceChild(newItem, listItem);Linguagem de código: CSS ( css )Aqui está a saída:
Anterior
Próximo
