如何使用insertBefore在XML指定位置插入新节点？

问题背景 #

现有如下XML负载：

<myXML>
  <ctx>
   <recipient>
      <CardNumber>1245</CardNumber>
      <age>16</age>
      <height>180</height>          
   </recipient>
  </ctx>
</myXML>

初始执行代码：

var xmlDoc = DOMDocument.fromXMLString(message).getElementsByTagName("myXML")[0].toXMLString();

该代码输出从ctx节点开始的内容，需求是使用insertBefore在指定位置添加新节点，但尝试的方法均无效。

尝试过的无效代码 #

• 直接传入XML字符串调用insertBefore：

xmlDoc.insertBefore("<email>david@garcia.com</email>","<CardNumber>");

• 错误的节点挂载逻辑：

var email = xmlDoc.createElement("email");
email.textContent = "david@garcia.com";
email.appendChild(ctx)

正确实现代码 #

var myxml = <myXML>
       <recipient>
          <CardNumber>1245</CardNumber>
          <age>16</age>
          <height>180</height>          
       </recipient>
       <recipient2>
          <CardNumber1>1245</CardNumber1>
          <age>16</age>
          <height>180</height>          
       </recipient2>       
   </myXML>;

var xmlDoc = new DOMDocument.fromXMLString(myxml);
var root = xmlDoc.root;

// 创建ctx节点并添加到根节点
var ctx = xmlDoc.createElement("ctx");
root.appendChild(ctx);

// 创建email节点并设置内容
var emailElem = xmlDoc.createElement("email");
emailElem.textContent = "david@garcia.com";

// 获取目标节点的父节点和参考节点
var parentNode = xmlDoc.getElementsByTagName("CardNumber")[0].parentNode;
var referenceNode = xmlDoc.getElementsByTagName("CardNumber")[0];

// 在参考节点之前插入新节点
parentNode.insertBefore(emailElem, referenceNode);

logInfo(xmlDoc.toXMLString())

输出结果 #

<?xml version='1.0'?>
<myXML>
  <recipient>
    <email>david@garcia.com</email>
    <CardNumber>1245</CardNumber>
    <age>16</age>
    <height>180</height>
  </recipient>
  <recipient2>
    <CardNumber1>1245</CardNumber1>
    <age>16</age>
    <height>180</height>
  </recipient2>
  <ctx/>
</myXML>

核心要点 #

• 必须通过createElement方法创建合法的DOM节点，不能直接将XML字符串作为insertBefore的参数
• insertBefore的正确调用逻辑：
  1. 先创建并配置好要插入的新节点
  2. 获取目标参考节点（新节点要插入到该节点之前）
  3. 调用参考节点的父节点的insertBefore方法，传入新节点和参考节点

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