innerHTML &&appendChild

### JavaScript 中 `appendChild` 方法的使用 在 JavaScript 中，`appendChild` 是 DOM API 的一部分，用于向指定父节点追加一个子节点。此操作会将新创建或已存在的节点作为最后一个子节点添加到目标元素内[^1]。 #### 使用示例 下面是一个简单的例子来展示如何利用 `appendChild` 向页面上的无序列表 (`ul`) 动态增加列表项 (`li`)： ```html <ul id="week"></ul> <script type="text/javascript"> // 获取要操作的目标元素 var weekNode = document.getElementById("week"); for (var i = 4; i <= 7; i++) { // 创建新的<li>元素 var li = document.createElement("li"); // 设置<li>的内容 if (i === 7) { li.innerHTML = "星期日"; } else { li.innerHTML = "星期" + i; } // 将新建的<li>添加至<ul>中成为其子节点 weekNode.appendChild(li); } </script> ``` 上述代码片段展示了如何通过循环结构批量创建并附加多个 `<li>` 到具有 ID 值为 `"week"` 的 `<ul>` 下面。每次迭代都会执行如下动作：先定位容器节点；接着构建一个新的列表条目，并填充适当的文字内容；最后调用 `appendChild()` 把这个新项目加入到现有 HTML 文档树里去。 #### 关键点总结 - **参数**: 接受单个参数——即想要被添加为目标节点最后一级孩子的 Node 对象。 - **返回值**: 返回所添加的那个子节点本身。 - **注意事项**: 如果尝试附加上已经存在于文档中的某个节点，则该节点会被从原来位置移除再放置于新位置上。