appendChild是安全添加DOM节点，不解析字符串、保留事件；innerHTML是字符串解析重写HTML，有XSS风险、清除事件和表单状态。
在JavaScript中创建元素，appendChild 和 innerHTML 都能实现内容插入，但它们的原理、用途和风险完全不同——关键区别在于：一个是“安全添加节点”，另一个是“字符串解析重写HTML”。
appendChild 是操作 DOM 节点的安全方式
appendChild 接收一个已存在的 DOM 元素节点（比如用 document.createElement 创建的），把它作为子节点加到目标元素末尾。它不涉及字符串解析，不会破坏已有绑定的事件或表单状态。
常用组合写法：
- 先用
document.createElement('div')创建新元素 - 用
element.textContent = 'xxx'或element.setAttribute()设置内容/属性 - 最后调用
parent.appendChild(element)
✅ 优点：安全、可预测、保留事件监听器（对父容器内其他子节点无影响）
❌ 缺点：写法稍长，批量插入多个元素需循环
立即学习“Java免费学习笔记（深入）”；
innerHTML 是用字符串替换内部 HTML 的快捷方式
innerHTML 是一个属性，赋值时会把字符串当作 HTML 解析，并完全替换目标元素的全部子节点。它不是方法，不能“追加”，而是“重写”。
例如：box.innerHTML += '<p>新段落</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1412" title="聚好用AI"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175680059460782.png" alt="聚好用AI" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1412" title="聚好用AI">聚好用AI</a>
<p>可免费AI绘图、AI音乐、AI视频创作，聚集全球顶级AI，一站式创意平台</p>
</div>
<a href="/ai/1412" title="聚好用AI" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>' 看似追加，实际是读取旧 HTML → 拼接字符串 → 全部重新解析渲染，原有子节点全部销毁。
✅ 优点：写法简洁，适合快速渲染结构较简单的模板
❌ 缺点：有 XSS 风险（若拼接用户输入未转义）、会清除已绑定事件、可能意外重置表单值、性能较差（尤其大段 HTML）
什么时候该用哪个？
选 appendChild 当：
- 需要动态添加单个或少量元素，且要保留交互逻辑
- 插入内容来自用户输入（必须防 XSS）
- 操作的是表单、canvas、video 等特殊元素子节点
谨慎用 innerHTML 当：
- 渲染纯静态、可信的 HTML 片段（如后台返回的富文本）
- 整块区域需要彻底更新，且没有其他 JS 逻辑依赖原子节点
- 配合模板字符串快速生成简单列表（记得先转义变量！）
更现代的替代方案
如果想兼顾简洁与安全，可以考虑：
-
element.insertAdjacentHTML('beforeend', htmlStr)：比 innerHTML 多了插入位置控制，但仍需防 XSS -
document.createElement+append()/prepend()：支持一次插入多个节点，比 appendChild 更灵活 - 使用
textContent替代 innerHTML 显示纯文本，彻底避免 HTML 解析和 XSS
基本上就这些。记住核心：appendChild 操作的是对象，innerHTML 处理的是字符串——类型不同，责任也不同。
