如何在 JavaScript 中替换 DOM 元素

要替换 DOM 树中的 DOM 元素，请执行以下步骤

首先，选择要替换的 DOM 元素。
然后，创建一个新元素。
最后，选择目标元素的父元素，并使用 replaceChild() 方法用新元素替换目标元素。

查看以下 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>Code language: HTML, XML (xml)

要选择最后一个列表项元素，请执行上述步骤

首先，使用 querySelector() 方法选择最后一个列表项

const listItem = document.querySelector("li:last-child");Code language: JavaScript (javascript)

其次，创建一个新的列表项元素

const newItem = document.createElement('li');
newItem.innerHTML = '<a href="/products">Products</a>';Code language: JavaScript (javascript)

最后，获取目标元素的父元素并调用 replaceChild() 方法

listItem.parentNode.replaceChild(newItem, listItem);Code language: CSS (css)

以下是输出结果

本教程对您有帮助吗？