element.innerHTML 获取/设置 HTML 内容

最后更新：2026-09-09

innerHTML 获取或设置元素的 HTML 内容（包含子标签）。设置时会解析 HTML 并重新渲染。

分类	DOM 操作
ES 版本	DOM

📝 语法

元素.innerHTML = '<p>新内容</p>';

返回值：HTML 字符串。

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

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

运行结果：

（HTML 内容）

⚠️ 警告 innerHTML 有 XSS 风险——不要直接插入用户输入。纯文本用 textContent 更安全。

💡 提示 innerHTML 适合批量插入 HTML；单个文本用 textContent 性能更好。

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

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

QinnerHTML 和 textContent 的区别？

AinnerHTML 解析 HTML 标签；textContent 只处理纯文本。

QinnerHTML 有什么安全风险？

A插入用户输入的 HTML 可能被注入恶意脚本——用 textContent 或转义。

QinnerHTML 会影响事件监听器吗？

A会——设置 innerHTML 会销毁所有子元素及其事件监听器。

Web-Tutorial 技术团队

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