HTML DOM replaceChild() Method

什么是 replaceChild() 方法？

replaceChild() 方法是 HTML DOM 中的一种方法，用于替换指定父元素中的一个子元素。通过这个方法，我们可以动态地更新页面上的内容，而不用重新加载整个页面。

replaceChild() 方法的语法

replaceChild() 方法的语法如下：

parentNode.replaceChild(newNode, oldNode);

• parentNode：要替换子元素的父元素。
• newNode：将要插入的新元素。
• oldNode：将要被替换的子元素。

replaceChild() 方法的示例

下面我们来看一个简单的示例，演示如何使用 replaceChild() 方法来替换页面上的一个元素。

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>replaceChild() 方法示例</title>
</head>
<body>
    <div id="parent">
        <p id="old">这是旧的段落。</p>
    </div>

    <button onclick="replaceElement()">点击这里替换元素</button>

    <script>
        function replaceElement() {
            var parent = document.getElementById("parent");
            var oldNode = document.getElementById("old");
            var newNode = document.createElement("p");
            newNode.innerHTML = "这是新的段落。";

            parent.replaceChild(newNode, oldNode);
        }
    </script>
</body>
</html>

在上面的示例中，我们首先创建了一个包含一个段落元素的父元素。然后通过点击按钮触发 replaceElement() 函数，使用 replaceChild() 方法将旧的段落元素替换为新的段落元素。

总结

通过本文的介绍，我们了解了 HTML DOM 中的 replaceChild() 方法的用法和示例。这个方法在前端开发中非常有用，能够帮助我们实现动态更新页面内容的功能。希望本文对你有所帮助！