JavaScript操作XML时如何正确追加多层嵌套的子节点

错误根源 #

appendChild方法的返回值是本次插入的子节点，而非调用方法的父节点。
你代码中let addMe = newNode.appendChild(newNode2)拿到的addMe是内层节点newNode2，并非外层的newNode。后续执行newParentTestNode[0].appendChild(addMe)时，实际只把内层的TestNode2插入到了目标父节点下，外层TestNode从未被挂载到XML文档树中，序列化后自然会缺失外层嵌套层级。
另外你的代码还存在两个和预期结果不符的细节问题：

• 创建节点时未添加gmd:命名空间前缀，生成的节点名和预期结构不匹配
• 局部变量未添加声明关键字，存在全局作用域污染风险

修正后可运行代码 #

xmlTest: function (evt) { 
  if(this.item.metadata_standard_name == "Correct Data"){
    const xmlString = this.item.sys_xml_clob;
    const metadataXmlDoc = jQuery.parseXML(xmlString); 

    // 获取目标父节点
    const targetParent = metadataXmlDoc.getElementsByTagName("gmd:MTTEST")[0];
    // 创建带正确命名空间前缀的节点
    const outerNode = metadataXmlDoc.createElement("gmd:TestNode");
    const innerNode = metadataXmlDoc.createElement("gmd:TestNode2");

    // 先组装嵌套结构：内层节点挂到外层节点下
    outerNode.appendChild(innerNode);
    // 再把组装好的外层节点整体挂到目标父节点下
    targetParent.appendChild(outerNode);

    // 序列化输出XML
    const resultXml = new XMLSerializer().serializeToString(metadataXmlDoc);
    console.log(resultXml);
  }
}

额外提示 #

原生XMLSerializer默认输出无缩进的紧凑XML字符串，如果需要和示例一样带缩进的格式化结构，可以额外加XML格式化逻辑处理，不影响节点层级的正确性。

内容的提问来源于stack exchange，提问作者Jed