更稳妥的做法，是优先用 insertAdjacentHTML() 来精确插入 HTML 字符串。

它支持 beforebegin、afterend、afterbegin、beforeend 四种插入位置，而且不会把原有事件监听器一并破坏掉。

相比之下，innerHTML 更适合整块替换内容。如果拿它做追加，往往会触发重新解析，结果就是监听器丢失。

至于 createElement + innerHTML 这种写法，通常显得多此一举，能避开就尽量避开。

还有一点尤其关键：只要涉及用户输入，就必须先做好转义，或者直接使用 DOMPurify 来防范 XSS。

直接用 innerHTML 或 insertAdjacentHTML()，是最常用、最安全的方式，不需要手动解析字符串，也不需要创建一堆元素节点。

常用方式怎么选

用 insertAdjacentHTML() 精准插入

这个方法可以把 HTML 字符串插到目标元素的四个位置：

• 元素前面：'beforebegin'
• 元素后面：'afterend'
• 元素内部最前面：'afterbegin'
• 元素内部最后面：'beforeend'

字符串会被自动解析后再插入到 DOM 中。

通常不会把原有的事件监听器弄丢，前提是不要直接覆盖那些已经绑定了监听器的节点。

• el.insertAdjacentHTML('beforeend', '
  新内容
  ') —— 插到元素内部末尾，等效于 el.innerHTML += ...，但更推荐，因为不重新解析整个 innerHTML
• el.insertAdjacentHTML('beforebegin', '

  前置段落

  ') —— 插到元素自己前面，成为其兄弟节点
• 注意：第二个参数必须是合法 HTML 字符串，不能是纯文本；浏览器会自动转义标签内属性值，但需确保结构闭合，否则可能被修正或截断

用 innerHTML 替换或追加内容

innerHTML 适合整体替换子内容，也适合简单场景下的内容追加。

写法虽然简洁，但要注意它的副作用。

• el.innerHTML += '追加' 实际上会重新解析整个 innerHTML，导致子元素上的事件监听器丢失
• el.innerHTML = '全新内容' 会清空原有子节点，全部重建
• 如果只是追加，优先选 insertAdjacentHTML('beforeend', ...)，语义清晰、性能更好、更安全

避免用 document.createElement + innerHTML 拼接

有些人会先创建一个空 div，设置 innerHTML，再追加到页面里。

这种做法通常没有必要，而且显得绕。

• const temp = document.createElement('div'); temp.innerHTML = str; el.appendChild(temp.firstElementChild);
• 这么做不仅代码冗长，还容易出错（比如字符串含多个顶层节点时，firstElementChild 只取第一个）
• 除非你需要对生成的节点做进一步操作（如遍历、过滤、修改属性），否则没必要绕路

需要动态渲染又担心 XSS？得预处理

insertAdjacentHTML 和 innerHTML 不做任何过滤，会直接执行 HTML 解析。

如果字符串来自用户输入，必须提前转义。

• 只对要作为文本显示的部分做 HTML 转义（例如用 textContent 或 document.createTextNode()）
• 若必须插入富文本，应使用专用库（如 DOMPurify）清理后再插入
• 切勿把未校验的用户数据直接拼进 HTML 字符串里，哪怕只是 也可能触发脚本执行

《夸克》非常好用的免费AI浏览器

下载APP查看