element.appendChild() 添加子元素

最后更新：2026-09-09

appendChild 将一个节点添加为当前元素的最后一个子元素。如果节点已在 DOM 中则会移动它。

分类	DOM 操作
ES 版本	DOM

📝 语法

父元素.appendChild(子元素);

child	要添加的子节点（元素或文本节点）。

返回值：被添加的子节点。

是否修改原值：是（原地修改）

编辑下方代码，点击运行，在输出面板查看结果：

运行结果：

（li 被添加到列表末尾）

💡 提示 appendChild 如果传入的节点已在 DOM 中，会移动它（不是复制）。

ℹ️ info 批量插入时用 DocumentFragment 减少重排。

浏览器	Chrome	Edge	Firefox	Safari	Opera
element.appendChild()	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
所有现代浏览器均支持

更多实战案例即将上线，敬请期待。

QappendChild 会复制元素吗？

A不会——移动已有元素（原位置会移除）。复制用 cloneNode(true)。

QappendChild 和 append 的区别？

Aappend 可以传多个参数和字符串；appendChild 只能传一个节点。

Q如何在元素开头插入？

A用 prepend() 或 insertBefore(el, parent.firstChild)。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。