XML DOM 创建节点 最全速查表（2025 版）

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

想创建什么？	推荐方法（2025 首选）	备选（老项目）	是否自动转义 < > &	必背度
创建元素节点	doc.createElement("tag")	—	—	★★★★★
创建文本节点	doc.createTextNode("文本")	—	自动转义	★★★★★
创建属性节点	element.setAttribute("name", "value")（推荐！）	doc.createAttribute("name")	不转义	★★★★★
创建 CDATA 节点（不转义）	doc.createCDATASection("<b>不转义</b>")	—	不转义	★★★★
创建注释节点	doc.createComment("注释内容")	—	自动转义	★★★★
快速创建带文本的元素	el = doc.createElement("tag"); el.textContent = "文本"	—	自动转义	★★★★★

真实 XML 示例（目标创建这本书）

<book id="999" category="科幻" available="true">
  <title lang="zh">三体Ⅲ：死神永生</title>
  <author>刘慈欣</author>
  <price currency="CNY">68.00</price>
  <!-- 2025年新版 -->
</book>

完整创建代码（直接复制，一行行执行就得到上面那本书）

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

// 1. 创建 <book> 元素 + 属性（最常用组合）
const newBook = doc.createElement("book");
newBook.setAttribute("id", "999");
newBook.setAttribute("category", "科幻");
newBook.setAttribute("available", "true");

// 2. 创建 <title> + 属性 + 文本
const title = doc.createElement("title");
title.setAttribute("lang", "zh");
title.textContent = "三体Ⅲ：死神永生";        // 自动转义 < > &

// 3. 创建 <author>
const author = doc.createElement("author");
author.textContent = "刘慈欣";

// 4. 创建 <price> + 属性 + 文本
const price = doc.createElement("price");
price.setAttribute("currency", "CNY");
price.textContent = "68.00";

// 5. 创建注释
const comment = doc.createComment("2025年新版");

// 6. 组装（把所有子节点加进 book）
newBook.append(title, author, price, comment);

// 7. 把整本书加入 bookstore
root.appendChild(newBook);

// 8. 输出最终 XML
console.log(new XMLSerializer().serializeToString(doc));

终极快捷写法（一行创建一个完整节点）

// 创建 <tag attr="value">文本</tag>（超级实用！）
function create(tag, attrs = {}, text = "") {
  const el = doc.createElement(tag);
  Object.entries(attrs).forEach(([k, v]) => el.setAttribute(k, v));
  if (text) el.textContent = text;
  return el;
}

// 一行创建一本书的所有子节点
newBook.append(
  create("title", { lang: "zh" }, "三体Ⅲ：死神永生"),
  create("author", {}, "刘慈欣"),
  create("price", { currency: "CNY" }, "68.00"),
  doc.createComment("2025年新版")
);

经典坑 & 终极解决方案

坑	错误写法	正确写法（2025）
直接用 innerHTML 创建 XML	newBook.innerHTML = "<title>..</title>"	错！XML 不支持 innerHTML，会报错或乱码
想放 加粗 但被转义成文本	title.textContent = "<b>加粗</b>"	正确！自动转成 <b>，防止注入
真想保留原始 < > （比如代码片段）	用 textContent	用 doc.createCDATASection("<b>加粗</b>")
创建属性后忘记加到元素上	doc.createAttribute("id")	必须 element.setAttribute() 或 element.setAttributeNode()

2025 年终极记忆口诀（背 3 句就够用一辈子）

1. 创建元素 → createElement
2. 创建文本 → createTextNode 或直接 textContent = "..."
3. 创建属性 → 永远只用 setAttribute("name", "value")

终极工具函数（复制到项目里一辈子够用）

// 万能创建函数（推荐所有项目都加这个）
function $c(tag, attrs = {}, ...children) {
  const el = doc.createElement(tag);
  Object.entries(attrs).forEach(([k, v]) => el.setAttribute(k, v));
  children.forEach(child => {
    if (typeof child === "string") child = doc.createTextNode(child);
    el.appendChild(child);
  });
  return el;
}

// 使用（超爽！）
root.appendChild(
  $c("book", { id: "999", category: "科幻" },
    $c("title", { lang: "zh" }, "三体Ⅲ：死神永生"),
    $c("author", {}, "刘慈欣"),
    $c("price", { currency: "CNY" }, "68.00"),
    doc.createComment("2025年新版")
  )
);

记住这张表 + 3 句口诀 + 一个 $c 函数，
你就已经达到“XML DOM 创建节点”的神级境界，任何复杂结构都能 10 秒写完！

需要我给你一个“拖拽式可视化创建 XML 节点”的在线工具，随时说一声～