document.createElement() 创建未挂载的 DOM 节点，需配合 appendChild() 等方法插入；注意标签名合法、不自动挂载、优先用 textContent 防 XSS；insertBefore() 的参考节点为子节点而非索引；推荐 firstElementChild 替代 firstChild 避免文本节点干扰。
用 document.createElement() 创建新元素
创建 DOM 元素最直接的方式就是调用 document.createElement()，传入标签名字符串（不带尖括号），它返回一个未挂载的节点对象。
注意：标签名必须是合法的 HTML 标签名（如 "div"、"span"、"li"），大小写不敏感，但建议小写；不能传 "<div>" 或 <code>"div+" 这类非法值，否则会抛出 DOMException。
常见误区：有人误以为 createElement() 会自动添加到页面——它只生成节点，不插入。
-
document.createElement("p")返回一个空的<p></p>节点 - 可立即设置属性：
el.className = "alert"、el.id = "msg"、el.textContent = "Hello" - 不推荐用
el.innerHTML = "..."初始化内容，除非你明确需要解析 HTML；否则优先用textContent防 XSS
用 appendChild() 和 insertBefore() 插入节点
插入操作必须指定「父容器」和「插入位置」。最常用的是 appendChild()（追加到末尾）和 insertBefore()（插在某个子节点前）。
立即学习“Java免费学习笔记（深入）”；
关键点：insertBefore() 的第二个参数是「参考子节点」，不是索引；如果传 null，效果等同于 appendChild()。
const container = document.getElementById("list");
const newItem = document.createElement("li");
newItem.textContent = "New item";
// 追加到最后
container.appendChild(newItem);
// 插入到第一个子元素前（即变成第一个）
const firstChild = container.firstChild;
container.insertBefore(newItem, firstChild);
- 如果参考节点不在该父容器内，
insertBefore()会静默失败（不报错，但不插入） -
appendChild()对已存在节点是「移动」而非「复制」：若newItem已在 DOM 中，它会被从原位置移走 - 批量插入多个节点时，避免反复触发重排；可先用
DocumentFragment组装再一次性插入
更灵活的插入方式：before()、after()、replaceWith()
这些是较新的 DOM 方法（IE 不支持），作用对象是「已有节点」本身，语法更贴近语义：
-
existingEl.before(newEl)→ 把newEl插入到existingEl前面（同级） -
existingEl.after(newEl)→ 插入到后面（同级） -
existingEl.replaceWith(newEl)→ 替换掉自己
它们不要求你先拿到父节点，也支持传多个参数（如 el.before(a, b, c)），适合局部更新场景。
兼容性注意：如需支持 IE，得用 parentNode.insertBefore() 回退；现代项目（Chrome/Firefox/Safari/Edge 79+）可放心用。
const target = document.querySelector("button");
const newSpan = document.createElement("span");
newSpan.textContent = "(new)";
target.before(newSpan); // 新 span 出现在 button 上方（同级）
容易被忽略的细节：文本节点与空白符影响 firstChild
用 firstChild 或 lastChild 获取参考节点时，常因 HTML 中的换行或空格导致意外拿到 Text 节点，而非预期的 Element。
例如：<ul>\n <li>A</li>\n</ul> 中，ul.firstChild 很可能是换行符组成的文本节点，不是 <li>。
- 安全做法：用
firstElementChild/lastElementChild（跳过非 Element 节点） - 或者用
children[0]（只包含 Element 子节点的 HTMLCollection） - 调试时可用
console.log(node.nodeType)判断：1=Element，3=Text
这问题在动态插入时不易察觉，尤其当模板里习惯写缩进和换行时。
