📌  相关文章
📜  HTML | DOM replaceChild() 方法(1)

📅  最后修改于: 2023-12-03 14:41:48.649000             🧑  作者: Mango

HTML | DOM replaceChild() 方法

replaceChild()方法是HTML DOM中的一种操作，可以替换一个节点的子节点。该方法需要两个参数：一个新节点和一个要被替换的节点。

语法
parent.replaceChild(newNode,oldNode)

参数说明：

  • newNode：必需。新节点，用于替换旧节点。
  • oldNode：必需。旧节点，需要被替换掉。
示例
<html>
  <head>
    <title>DOM replaceChild() 方法示例</title>
    <script>
      function replace() {
        // 获取需要替换的节点
        var oldNode = document.getElementById("oldNode");
        // 创建新节点
        var newNode = document.createElement("p");
        var textNode = document.createTextNode("我是新节点");
        newNode.appendChild(textNode);

        // 替换节点
        oldNode.parentNode.replaceChild(newNode,oldNode);
      }
    </script>
  </head>

  <body>
    <div id="container">
      <p id="oldNode">我是旧节点</p>
      <button onclick="replace()">替换节点</button>
    </div>
  </body>
</html>

运行结果：

replaceChild() 方法运行效果

总结

replaceChild()方法是HTML DOM中的一种操作，可用于替换一个节点的子节点。通过传递新节点和需要被替换的节点参数，可以实现替换节点的操作。