document.createElement() 创建元素

最后更新：2026-09-09

createElement 创建一个新的 DOM 元素（尚未插入页面）。配合 appendChild 或 insertAdjacentHTML 插入页面。

分类	DOM 操作
ES 版本	DOM

📝 语法

const 元素 = document.createElement('标签名');

tagName	要创建的元素标签名，如 'div'、'span'、'p'。

返回值：新创建的元素对象。

是否修改原值：否（返回新值）

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

运行结果：

（新元素插入页面）

💡 提示 createElement 创建的元素不在页面中——需要 appendChild 或类似方法插入。

ℹ️ info 插入大量元素时使用 DocumentFragment 提高性能。

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

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

QcreateElement 创建的元素在页面中吗？

A不在——只存在于内存中，需要 appendChild 插入。

Q如何给新元素添加内容？

A用 textContent 或 innerHTML，或 createElement 子元素后 appendChild。

QcreateElement 和 innerHTML 的区别？

AcreateElement 更安全（无 XSS 风险）且性能好；innerHTML 适合批量 HTML 插入。

Web-Tutorial 技术团队

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