JS创建元素并添加到页面的方法

常见误区：有人误以为 createElement() 会自动添加到页面——它只生成节点，不插入。

• document.createElement("p") 返回一个空的
  节点
• 可立即设置属性：el.className = "alert"、el.id = "msg"、el.textContent = "Hello"
• 不推荐用 el.innerHTML = "..." 初始化内容，除非你明确需要解析 HTML；否则优先用 textContent 防 XSS

用 appendChild() 和 insertBefore() 插入节点

插入操作必须指定「父容器」和「插入位置」。最常用的是 appendChild()（追加到末尾）和 insertBefore()（插在某个子节点前）。

关键点：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。

例如：

\n
• A
\n