JavaScript动态添加节点分两步：先用document.createElement()创建未挂载的元素节点，再用appendChild()或insertBefore()插入DOM。需确保父节点存在，避免innerHTML+=导致事件丢失和XSS风险。
JavaScript 创建和添加新节点，核心就两步：先用 document.createElement() 造出来，再用 appendChild() 或 insertBefore() 塞进 DOM 树里。别被“动态操作 DOM”这种说法吓住，实际就是拼积木——造好再插进去。
怎么创建一个新元素节点？
用 document.createElement()，传入标签名字符串，它返回一个空的、未挂载的节点对象。
- 只支持标准 HTML 标签名（如
"div"、"span"、"li"），不支持自定义属性或内容 - 返回的是原生
Element实例，不是字符串，不能直接拼接或打印成 HTML 文本 - 创建后必须手动设置属性、文本或子节点，否则它什么也不显示
const newDiv = document.createElement("div");
newDiv.className = "alert";
newDiv.textContent = "操作成功";
怎么把新节点加到页面里？
最常用的是 appendChild()，把它追加为某个父节点的最后一个子节点；如果要插在中间，得用 insertBefore()。
-
parentNode.appendChild(childNode)：简单直接，但只能插末尾 -
parentNode.insertBefore(newNode, referenceNode)：第二个参数是“参考节点”，新节点会插在它前面；如果referenceNode是null，效果等同于appendChild - 目标父节点必须已存在于 DOM 中（比如
document.body或通过querySelector找到的元素），否则会报错TypeError: Cannot read property 'appendChild' of null
const container = document.querySelector("#list");
const newItem = document.createElement("li");
newItem.textContent = "新任务";
// 插到最后
container.appendChild(newItem);
// 插到第一个位置（假设已有子节点）
const firstItem = container.firstElementChild;
container.insertBefore(newItem, firstItem);
为什么 innerHTML += 不推荐用于添加节点？
虽然 element.innerHTML += "..." 看起来更短，但它会触发整个 innerHTML 的重新解析和重建，导致已有子节点绑定的事件监听器全部丢失、输入框内容清空、焦点丢失。
- 性能差：每次 += 都要重新生成所有子节点的 DOM 结构
- 副作用大：破坏已有状态（比如
的 value、的光标位置） - 安全风险：若拼接的内容来自用户输入，没做转义会引发 XSS
- 正确做法是只对新节点操作，不影响旧节点
插入文本节点和 HTML 字符串的区别在哪？
文本内容用 textContent 或 innerText 最安全；如果真要插入带标签的 HTML，必须用 insertAdjacentHTML()，而不是直接赋值 innerHTML。
-
node.textContent = "危险"→ 显示为纯文本，不解析标签 -
node.insertAdjacentHTML("beforeend", "安全")→ 解析并插入 HTML，且不会影响已有子节点 -
node.innerHTML = "... "会清
空原有内容，慎用
const p = document.querySelector("p");
p.textContent = ""; // 安全，显示原文本
p.insertAdjacentHTML("beforeend", "加粗"); // 安全插入 HTML
真正容易出问题的不是“怎么写”，而是忘了检查父节点是否存在、或者误把字符串当节点传给 appendChild。多打一行 console.log(parentNode) 能省掉大半调试时间。
