优先用 innerHTML 填充，但需防范 XSS；纯文本用 textContent；结构化内容用 createElement + appendChild；大批量用 DocumentFragment；追加内容用 insertAdjacentHTML。
直接用 innerHTML 填充最常用，但要注意 XSS 风险
绝大多数时候，你想往一个 <div id="container"></div> 里塞文字或 HTML 片段，innerHTML 是最快路径。但它会把字符串当作 HTML 解析执行，如果内容来自用户输入或外部 API，可能触发脚本注入。
- 安全场景（如后台生成的静态文案）：
document.getElementById('container').innerHTML = '<strong>已加载</strong>'; - 不安全场景（如显示评论）：必须先转义 HTML 特殊字符，或改用
textContent - 若只填纯文本，优先用
textContent——它不解析标签，天然防 XSS
动态插入结构化内容时，createElement + appendChild 更可控
当你需要创建带 class、事件监听器、或嵌套层级的元素（比如列表项），拼接字符串再赋给 innerHTML 容易出错且难维护。
- 避免这样写：
el.innerHTML += '<li class="item" onclick="doSomething()">' + data.title + '</li>';
- 推荐这样构造：
const li = document.createElement('li');<br>li.className = 'item';<br>li.textContent = data.title;<br>li.addEventListener('click', doSomething);<br>document.getElementById('list').appendChild(li); - 优势：属性和事件可编程控制；不会意外覆盖已有子节点；利于后续 DOM 操作（如 remove、replace）
批量填充大量数据？别用多次 appendChild，改用 DocumentFragment
循环 100 次调用 appendChild 会触发 100 次重排（reflow），性能明显下降。浏览器对频繁 DOM 修改很敏感。
- 低效写法：
for (const item of items) {<br> const li = document.createElement('li');<br> li.textContent = item;<br> list.appendChild(li); // 每次都触发 layout 计算<br>} - 高效写法：
const frag = document.createDocumentFragment();<br>for (const item of items) {<br> const li = document.createElement('li');<br> li.textContent = item;<br> frag.appendChild(li);<br>}<br>list.appendChild(frag); // 仅一次真实 DOM 插入 -
DocumentFragment是离线容器，不挂载到文档，操作它不触发渲染
用 insertAdjacentHTML 精确控制插入位置，比 innerHTML += 可靠
很多人想“在末尾追加”，就写 el.innerHTML += '<p>new</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10828" title="财经HTML高端海报生成"><img
src="https://img.php.cn/upload/skill/000/000/081/179336525482166.jpg" alt="财经HTML高端海报生成" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10828" title="财经HTML高端海报生成">财经HTML高端海报生成</a>
<p>复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP</p>
</div>
<a href="/xiazai/skill10828" title="财经HTML高端海报生成" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>'，但这会强制重新解析整个 innerHTML，已绑定的事件监听器全部丢失，表单值清空，滚动位置重置。
- 错误示范：
container.innerHTML += '<p>新增一行</p>'; // 重绘全部子节点
- 正确替代：
container.insertAdjacentHTML('beforeend', '<p>新增一行</p>'); // 只加在末尾，不影响已有节点 - 四个可选位置：
'beforebegin'、'afterbegin'、'beforeend'、'afterend'，语义清晰 - 注意：它仍存在 XSS 风险，内容不可信时需先过滤或转义
createElement 构造关键交互节点 → 批量插入用 DocumentFragment → 动态追加日志类内容用 insertAdjacentHTML。关键不是选哪个 API，而是清楚每个操作对 DOM 树、事件系统和渲染性能的实际影响。 
