HTML中插入内容有三类方式：innerHTML会重写子节点且有XSS风险；insertAdjacentHTML可精准定位且不破坏现有结构；appendChild配合createElement最安全可控，适合需绑定事件或校验属性的场景。
直接往 HTML 文档里插入文本、图片等元素，核心就两条路：静态写死（编辑 HTML 源码），或动态注入（用 JavaScript 操作 DOM）。没有“一键插入”这种魔法命令，关键看你要插在哪儿、什么时候插、谁来触发。
用 innerHTML 快速替换或拼接内容
这是最常用的动态插入方式，适合把一段 HTML 字符串塞进某个容器内部。但它会**完全重写目标元素的子节点**，已有事件监听器、输入框焦点、表单状态都会丢失。
- 只对
Element节点有效，不能用于document或document.body直接赋值（虽然某些浏览器允许，但不规范） - 插入含用户输入的内容时，必须先做转义，否则有 XSS 风险；不要直接拼接
userInput - 性能敏感场景慎用，频繁设置
innerHTML会触发多次重排重绘
const container = document.getElementById('content');
container.innerHTML = '<p>这是一段文本</p><img src="logo.png" alt="Logo">';
用 insertAdjacentHTML() 精确控制插入位置
比 innerHTML 更安全、更灵活。它不破坏现有子节点，还能指定插在目标元素的前、后、内首、内尾四个位置，且原生支持 HTML 字符串解析。
立即学习“前端免费学习笔记（深入）”；
-
'beforebegin'：插在目标元素自己前面（同级） -
'afterbegin'：插在目标元素childNodes最前面（即 innerHTML 开头） -
'beforeend'：插在目标元素childNodes最后面（即 innerHTML 结尾） -
'afterend'：插在目标元素自己后面（同级）
const btn = document.querySelector('button');
btn.insertAdjacentHTML('afterend', '<div class="hint">点击后生效</div>');
用 appendChild() 和 createElement() 插入纯净节点
当你需要完全可控、无 XSS 风险、且要绑定事件或读写属性时，应该走“创建节点 → 设置属性 → 插入”的路径。所有文本内容自动被转义，图片地址也能动态校验。
-
document.createElement('img')创建后，必须显式设置src、alt等属性才有效 - 插入文本节点要用
document.createTextNode()，不能直接传字符串给appendChild() - 一次只能 append 一个节点；批量插入建议用
DocumentFragment减少重排
const img = document.createElement('img');
img.src = '/assets/icon.svg';
img.alt = '图标';
img.className = 'icon-small';
document.body.appendChild(img);
注意 script 标签和内联事件的特殊行为
通过 innerHTML 或 insertAdjacentHTML() 插入含 <script></script> 的 HTML，脚本**不会自动执行**；插入 onclick="..." 这类内联事件也**不会绑定**。这是浏览器的安全限制，不是 bug。
- 要执行脚本，得手动创建
script元素、设置textContent、再appendChild - 内联事件应改用
addEventListener()绑定，更可靠也更易维护 - 服务端渲染或模板引擎（如 Handlebars）生成的 HTML，script 才会在加载时执行
真正难的不是“怎么插”，而是想清楚：这个元素是临时提示，还是持久结构？要不要响应用户操作？会不会被反复插入？这些决定了你该选哪条路，而不是背函数名。
