HTML DOM appendChild() 方法

什么是 appendChild() 方法

在 HTML DOM 中，appendChild() 方法用于向指定节点的子节点列表的末尾添加一个新的子节点。这个新节点可以是元素节点、文本节点、注释节点等。

如何使用 appendChild() 方法

要使用 appendChild() 方法，首先需要获取要添加子节点的父节点。然后创建要添加的新节点，并使用 appendChild() 方法将其添加到父节点中。

示例代码如下：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>appendChild() 方法示例</title>
</head>
<body>
    <div id="parent"></div>

    <script>
        // 获取父节点
        var parent = document.getElementById('parent');
        
        // 创建新的子节点
        var newElement = document.createElement('p');
        var textNode = document.createTextNode('这是新添加的段落。');
        
        newElement.appendChild(textNode);
        
        // 将新节点添加到父节点中
        parent.appendChild(newElement);
    </script>
</body>
</html>

在上面的示例中，我们首先获取了一个 id 为 "parent" 的 div 元素作为父节点，然后创建了一个新的 p 元素，并在其中添加了一个文本节点。最后，我们使用 appendChild() 方法将新的 p 元素添加到父节点中。

注意事项

• appendChild() 方法只能将一个节点添加到指定节点的子节点列表的末尾。如果要在指定位置添加节点，可以使用 insertBefore() 方法。
• 如果要添加的节点已经在 DOM 树中存在，那么它会先被移除，然后再添加到新的位置。
• 如果要添加的节点是一个文档片段（DocumentFragment），那么其中的所有子节点都会被添加到指定节点中。

总结

通过使用 appendChild() 方法，我们可以轻松地向指定节点添加新的子节点，从而动态地修改 DOM 结构。这个方法在 web 前端开发中经常被使用，可以帮助我们实现各种复杂的交互效果。希望本文对你有所帮助！