JavaScript 中 DOM 节点怎么插入 HTML 字符串-js教程-PHP中文网

推荐使用 insertadjacenthtml() 精准插入 html 字符串，支持 beforebegin、afterend、afterbegin、beforeend 四种位置，不破坏事件监听器；innerhtml 适合整体替换但追加时会重解析导致监听器丢失；避免 createelement + innerhtml 冗余操作；用户输入需预转义或用 dompurify 防 xss。

javascript 中 dom 节点怎么插入 html 字符串

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

用 `insertAdjacentHTML()` 精准插入

这个方法支持在目标元素的四个位置插入 HTML 字符串：前边（'beforebegin'）、后边（'afterend'）、内部开头（'afterbegin'）、内部结尾（'beforeend'。它会自动解析字符串并插入 DOM，且不破坏已有事件监听器（只要不覆盖含监听器的节点）。

el.insertAdjacentHTML('beforeend', '<div>新内容</div>') —— 插到元素内部末尾，等效于 el.innerHTML += ...，但更推荐，因为不重新解析整个 innerHTML
el.insertAdjacentHTML('beforebegin', '<p>前置段落</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>') —— 插到元素自己前面，成为其兄弟节点
注意：第二个参数必须是合法 HTML 字符串，不能是纯文本；浏览器会自动转义标签内属性值，但需确保结构闭合，否则可能被修正或截断

用 `innerHTML` 替换或追加内容

适合整体替换子内容，或简单追加。写法简洁，但要注意副作用：

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

避免用 `document.createElement` + `innerHTML` 拼接

有人想“先创建空 div，设 innerHTML，再 append”，这多此一举：

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