XML DOM 添加节点 最全速查表（2025 版）

—— 3 秒知道用哪个方法，99% 的添加需求全在这张表里！

添加方式	推荐指数	写法（2025 首选）	适用场景	是否最简洁
加到末尾（最常用）	★★★★★	parent.appendChild(newNode)	随便往哪加一个节点	经典
加多个节点/文本（最现代）	★★★★★	parent.append(node1, "文本", node2)	一次性加好几个	最强
加到最前面	★★★★★	parent.prepend(node)	插到最前面	超好用
插到某个节点前面	★★★★★	refNode.before(newNode)	精确插入（兄弟节点前）	最灵活
插到某个节点后面	★★★★★	refNode.after(newNode)	精确插入（兄弟节点后）	最灵活
插入到指定位置（老写法）	★★★★	parent.insertBefore(newNode, refNode)	兼容所有老浏览器	经典

真实 XML 示例（全程用这一个）

<bookstore>
  <book id="1"><title>JS高级</title></book>
  <book id="2"><title>三体</title></book>
</bookstore>

实战代码（直接复制，全都能用）

const doc  = new DOMParser().parseFromString(xmlStr, "text/xml");
const root = doc.documentElement;   // <bookstore>

// 1. 创建一本新书（先用前面学过的 create）
const newBook = doc.createElement("book");
newBook.setAttribute("id", "999");
newBook.innerHTML = `<title>三体Ⅲ：死神永生</title><author>刘慈欣</author>`;

// 2. 添加方式大汇总（任选其一）

// 方法① 最常用：加到最后
root.appendChild(newBook);

// 方法② 最现代：一次加多个（支持字符串！）
root.append(
  doc.createElement("separator"),           // 可以加元素
  " —— 分割线 —— ",                        // 可以直接加文本
  doc.createComment("2025年新书")           // 可以加注释
);

// 方法③ 加到最前面（新书排第一）
root.prepend(newBook);

// 方法④ 插到 id="2" 的书前面
const refBook = doc.querySelector("book[id='2']");
refBook.before(newBook);

// 方法⑤ 插到 id="1" 的书后面
doc.querySelector("book[id='1']").after(newBook);

// 方法⑥ 经典老写法（兼容 IE11）
root.insertBefore(newBook, root.firstElementChild);  // 插到最前面

终极推荐：2025 年只用这 3 个方法就够了！

parent.append(...nodes)     // 加到最后（支持多个）
parent.prepend(...nodes)    // 加到最前面
node.before(...nodes)       // 插到我前面
node.after(...nodes)        // 插到我后面

经典坑 & 终极解决方案

坑	错误写法	正确写法（2025）
想加文本但用了 appendChild(“文本”)	报错！字符串不是 Node	append("文本") 或 append(doc.createTextNode("文本"))
想一次加多个节点	只能一个个 appendChild	append(node1, node2, "文本")（2025 神器）
老浏览器不支持 append/prepend	Chrome 54+、Firefox 49+ 才支持	用 appendChild + insertBefore 兜底
添加后还想继续操作原节点	没问题！节点是引用，添加后还能改	完全可以！DOM 节点可以被多次操作

2025 年终极记忆口诀（背 4 个词就无敌）

想放哪儿？	用哪个方法？
最后面	append
最前面	prepend
某个节点前面	before
某个节点后面	after

终极兼容写法（支持到 IE9）

function safeAppend(parent, ...nodes) {
  if (parent.append) {
    parent.append(...nodes);
  } else {
    nodes.forEach(node => {
      if (typeof node === "string") node = document.createTextNode(node);
      parent.appendChild(node);
    });
  }
}

记住这张表 + 4 个词，
你就已经达到“XML DOM 添加节点”的神级境界，任何插入需求都能 3 秒写完！

需要我给你一个“拖拽排序 + 实时预览添加位置”的 XML 编辑器小工具，随时说一声～