最常用的是appendChild()，需确保父节点存在且非文本节点；insertBefore()可控制插入位置，参考节点可为null；innerHTML会清空原有内容，追加应使用insertAdjacentHTML()；插入后需及时设置属性和事件。
用 appendChild() 最直接，但得确保父节点存在且不是文本节点
这是最常用的添加方式，但新手常卡在“父节点没拿到”或“往 document 直接 append”上。浏览器会报错：TypeError: Cannot read property 'appendChild' of null 或 Cannot append to a Document。
实操建议：
- 先用
document.getElementById()、document.querySelector()等确认父容器已加载（最好放在DOMContentLoaded事件里） - 别对
document调用appendChild()—— 它不是Element，而是Document类型，不支持直接追加子元素；该用document.body.appendChild()或指定容器 - 如果父节点是空的或只有文本，
appendChild()仍能工作；但若父节点是只读的（如某些 Shadow DOM 场景），会静默失败或抛错
示例：
const newDiv = document.createElement('div');
newDiv.textContent = 'Hello';
const container = document.querySelector('#app');
if (container) {
container.appendChild(newDiv);
}
insertBefore() 控制插入位置，第二个参数不能为 null
当你需要把新元素插到某个已有子元素前面时，必须用这个。容易出错的是传入 null 作为参考节点——这其实等价于 appendChild()，但很多人误以为它会报错，或漏判参考节点是否存在。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 参考节点（第二个参数）可以是父节点的任意子节点，也可以是
null（此时效果同appendChild()） - 如果参考节点不在父节点下（比如你从别的地方取来的节点），调用后会自动从原位置移除、再插入新位置
- 注意兼容性：IE8+ 支持，现代环境无坑；但若参考节点是
undefined或未声明变量，会直接抛TypeError
示例：
const firstChild = container.firstChild;
container.insertBefore(newDiv, firstChild); // 插到最前
用 innerHTML 批量插入快，但会清空原有子节点
适合一次性写入 HTML 字符串，比循环 appendChild() 快不少，但副作用明显：它会先清空整个父节点内容，再解析字符串重建 DOM。如果你只想追加、又忘了这点，就等于“删了重来”。
实操建议：
- 只在确定要完全替换子内容时才用；追加请改用
insertAdjacentHTML() - 避免拼接用户输入，否则有 XSS 风险；若必须动态插入，优先用
textContent+createElement() - 大量 HTML 字符串插入时，性能优于逐个创建节点，但首次渲染开销略高（需 HTML 解析）
示例：
container.innerHTML += 'New item'; // ❌ 危险且低效
container.insertAdjacentHTML('beforeend', 'New item'); // ✅ 安全追加
动态创建元素后记得设置属性和事件，别只顾着 append
很多人调完 appendChild() 就以为完事了，结果点击没反应、样式不生效、data- 属性读不到——因为元素虽然进了 DOM，但还没绑定事件、没设 class、没加 dataset。
实操建议：
- 属性用
element.setAttribute('class', 'btn')或更推荐的element.className = 'btn' - 自定义数据用
element.dataset.id = '123'（对应data-id="123"） - 事件监听必须在 append 之后或之前绑定，但不能漏掉；若用事件委托，可省去单个绑定，但要注意委托目标是否已存在
示例：
const btn = document.createElement('button');
btn.textContent = 'Click me';
btn.className = 'primary-btn';
btn.addEventListener('click', () => alert('OK'));
container.appendChild(btn);
DOM 插入看着简单，真正麻烦的是时机、上下文和副作用——比如父节点还没挂载、Shadow DOM 边界、框架接管了更新逻辑、或者插入后样式/布局未触发重排。这些不会报错，但会让元素“看不见”或“点不动”。 
