推荐使用 insertAdjacentHTML() 精准插入 HTML 字符串，支持 beforebegin、afterend、afterbegin、beforeend 四种位置，不破坏事件监听器；innerHTML 适合整体替换但追加时会重解析导致监听器丢失；避免 createElement + innerHTML 冗余操作；用户输入需预转义或用 DOMPurify 防 XSS。
直接用 innerHTML 或 insertAdjacentHTML() 是最常用、最安全的方式，不需要手动解析字符串或创建一堆元素节点。
用 insertAdjacentHTML() 精准插入
这个方法支持在目标元素的四个位置插入 HTML 字符串：前边（'beforebegin'）、后边（'afterend'）、内部开头（'afterbegin'）、内部结尾（'beforeend'。它会自动解析字符串并插入 DOM，且不破坏已有事件监听器（只要不覆盖含监听器的节点）。
-
el.insertAdjacentHTML('beforeend', '<div>新内容</div>')—— 插到元素内部末尾，等效于el.innerHTML += ...，但更推荐，因为不重新解析整个innerHTML -
el.insertAdjacentHTML('beforebegin', '<p>前置段落</p>')—— 插到元素自己前面，成为其兄弟节点 - 注意：第二个参数必须是合法 HTML 字符串，不能是纯文本；浏览器会自动转义标签内属性值，但需确保结构闭合，否则可能被修正或截断
用 innerHTML 替换或追加内容
适合整体替换子内容，或简单追加。写法简洁，但要注意副作用：
-
el.innerHTML += '<span>追加</span>'实际上会重新解析整个innerHTML，导致子元素上的事件监听器丢失 -
el.innerHTML = '<b>全新内容</b>'会清空原有子节点，全部重建 - 如果只是追加，优先选
insertAdjacentHTML('beforeend', ...)，语义清晰、性能更好、更安全
避免用 document.createElement + innerHTML 拼接
有人想“先创建空 div，设 innerHTML，再 append”，这多此一举：
立即学习“Java免费学习笔记（深入）”；
const temp = document.createElement('div'); temp.innerHTML = str; el.appendChild(temp.firstElementChild);- 这么做不仅代码冗长，还容易出错（比如字符串含多个顶层节点时，
firstElementChild只取第一个） - 除非你需要对生成的节点做进一步操作（如遍历、过滤、修改属性），否则没必要绕路
需要动态渲染又担心 XSS？得预处理
insertAdjacentHTML 和 innerHTML 不做任何过滤，直接执行 HTML 解析。如果字符串来自用户输入，必须提前转义：
- 只对要作为文本显示的部分做 HTML 转义（例如用
textContent或document.createTextNode()） - 若必须插入富文本，应使用专用库（如 DOMPurify）清理后再插入
- 切勿把未校验的用户数据直接拼进 HTML 字符串里，哪怕只是
<img src="...">也可能触发脚本执行
