element.insertAdjacentHTML() 插入 HTML

最后更新：2026-09-09

insertAdjacentHTML 在指定位置插入 HTML 字符串，不覆盖已有内容。比 innerHTML 更灵活且不影响已有子元素。

分类	DOM 操作
ES 版本	DOM

📝 语法

元素.insertAdjacentHTML('beforeend', '<p>新内容</p>');

position	插入位置：beforebegin/afterbegin/beforeend/afterend。
html	要插入的 HTML 字符串。

返回值：undefined。

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

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

运行结果：

（HTML 已插入）

💡 提示 insertAdjacentHTML 不像 innerHTML 那样覆盖已有内容——适合追加。

⚠️ 警告 与 innerHTML 一样有 XSS 风险——不要插入未转义的用户输入。

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

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

QinsertAdjacentHTML 和 innerHTML 的区别？

AinsertAdjacentHTML 不覆盖已有内容且可以指定 4 个插入位置；innerHTML 会替换全部内容。

Qbeforeend 和 afterend 的区别？

Abeforeend 在元素内部末尾插入（成为子元素）；afterend 在元素外部后面插入（成为兄弟）。

Q四个位置分别是什么？

Abeforebegin（元素前）、afterbegin（内部开头）、beforeend（内部末尾）、afterend（元素后）。

Web-Tutorial 技术团队

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