js添加多个节点

在JavaScript中添加多个节点到DOM（文档对象模型）可以通过多种方法实现。以下是一些基础概念和相关方法：

基础概念

DOM（文档对象模型）：HTML和XML文档的编程接口，允许程序和脚本动态地访问和更新文档的内容、结构和样式。
Node：DOM树中的基本单元，可以是元素节点、文本节点、注释节点等。
Element：HTML或XML文档中的标签，如<div>、<p>等。

示例代码

以下是一个示例，展示如何使用JavaScript添加多个节点到一个容器元素中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Add Multiple Nodes</title>
</head>
<body>
    <div id="container"></div>

    <script>
        // 获取容器元素
        const container = document.getElementById('container');

        // 创建多个元素节点
        const items = ['Item 1', 'Item 2', 'Item 3'];
        items.forEach(itemText => {
            const div = document.createElement('div');
            div.textContent = itemText;
            container.appendChild(div);
        });

        // 或者使用DocumentFragment来提高性能
        const fragment = document.createDocumentFragment();
        items.forEach(itemText => {
            const div = document.createElement('div');
            div.textContent = itemText;
            fragment.appendChild(div);
        });
        container.appendChild(fragment);
    </script>
</body>
</html>