应优先用 appendChild 或 insertBefore，避免 innerHTML；appendChild 安全追加单节点，insertBefore 精准插入指定位置前，innerHTML 会清空原有内容及事件绑定且有 XSS 风险。
直接用 JavaScript 的 appendChild、insertBefore 或 innerHTML 就能插入元素，但选哪个、怎么写、为什么出错——得看你要插在哪、插什么、是否要保留原有事件绑定。
用 appendChild 往父节点末尾加元素
这是最常用也最安全的方式，适合动态创建新节点并追加到容器底部。
-
appendChild只接受一个Node类型参数，不能传字符串（传字符串会报TypeError: Failed to execute 'appendChild' on 'Node'） - 如果目标元素已存在于 DOM 中，调用
appendChild会先将其从原位置移除，再追加到新父节点——这其实是“移动”而非“复制” - 不支持批量插入多个节点；想插多个，得循环调用或用
DocumentFragment
const newDiv = document.createElement('div');
newDiv.textContent = '我是新元素';
document.body.appendChild(newDiv);
用 insertBefore 在指定位置前插入
当你需要把新元素插在某个已有子元素前面时，必须用它。它比 appendChild 多一个定位参数。
- 第二个参数是参考节点（
referenceChild），必须是父节点的**直接子节点**；传null等价于appendChild - 如果参考节点不存在（比如被删了或选错了），会抛出
NotFoundError - 和
appendChild一样，传入已挂载的节点会导致移动而非复制
const parent = document.getElementById('container');
const newSpan = document.createElement('span');
newSpan.textContent = '插在前面';
const refNode = parent.querySelector('p');
parent.insertBefore(newSpan, refNode);
慎用 innerHTML 插入 HTML 字符串
虽然写起来快，但它会重写整个父元素内容，清空原有子节点及其绑定的事件监听器、输入框状态、焦点等。
立即学习“前端免费学习笔记（深入）”；
- 只适合插入纯展示性内容，且确认父容器内无重要交互逻辑
- 若字符串含用户输入内容，必须手动转义
<、>、"等，否则有 XSS 风险 - 性能较差：浏览器需重新解析整段 HTML、重建所有子节点，比
appendChild慢一个数量级
const container = document.getElementById('list');
// ❌ 危险：未转义用户数据
container.innerHTML = '<li>' + userInput + '</li>';
// ✅ 安全做法：用 textContent 替代，或使用 DOM 方法构造
插入带事件的元素时，别丢掉监听器
用 innerHTML 或 outerHTML 替换内容后，原来绑在子元素上的 addEventListener 全失效了——因为那些元素已被销毁。
- 推荐用事件委托：把监听器挂在父节点，用
event.target判断触发源 - 或者每次插入后，显式重新绑定事件（适合少量固定结构）
- 避免在循环里反复调用
innerHTML += ...，这会不断重建 DOM，严重拖慢页面
真正难的不是“怎么插”，而是插完之后元素还能不能响应点击、有没有丢失数据、会不会意外清空表单——这些细节容易被忽略，但线上问题往往就出在这儿。
