JavaScript Node.replaceChild() 示例

摘要: 在本教程中，您将学习如何使用 JavaScript 的 Node.replaceChild() 方法用新元素替换 HTML 元素。

要替换 HTML 元素，请使用 node.replaceChild() 方法

parentNode.replaceChild(newChild, oldChild);Code language: CSS (css)

在此方法中，newChild 是要替换的新的节点，oldChild 节点是要替换的旧子节点。

假设您有以下项目列表

<ul id="menu">
    <li>Homepage</li>
    <li>Services</li>   
    <li>About</li>
    <li>Contact</li>
</ul>Code language: HTML, XML (xml)

以下示例将创建一个新的列表项元素，并将菜单中的第一个列表项元素替换为新的列表项元素。

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);Code language: JavaScript (javascript)

将所有内容整合在一起。

<!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>Code language: HTML, XML (xml)

摘要

使用 Node.replaceChild() 用新元素替换节点的子元素。

测验

本教程对您有帮助吗？