使用 Javascript 在 XML 文档中插入元素答案

【问题标题】：Inserting element inside an XML document using Javascript使用 Javascript 在 XML 文档中插入元素
【发布时间】：2017-03-01 23:07:24
【问题描述】：

有一个如下的 XML 字符串：

<stages>
<params/>
<test description=""/>
</stages>

我想在<test desc.../> 标记之后或阶段结束之前添加以下 XML 字符串，即</stages>

<stage id="myId" level="1">

以及所有后续阶段。

后加应该喜欢

<stages>
    <params/>
    <test description=""/>
    <stage id="myId" level="1"/>
    <stage id=.../>
    ...
</stages>

我正在尝试做这样的事情：

var stageNode = document.createTextNode(
                        "<stage id=\"myId\" level=\"1\">")              
                );
var root = document.getElementsByTagName("test").parentNode;
console.log(document.getElementsByTagName("test")); //<-- giving [] in console log and root is undefined; though the element is there
var stages = root.getElementsByTagName("stage");
root.insertBefore(stageNode,stages.nextSibling);

如何在 JavaScript 或 JQuery 中做到这一点？

使用 DocumentBuilder 或 DocumentBuilderFactory 给我“意外的标识符”错误。有没有更简单的方法来使用 Javascript 中的文档生成器（如 Java）来完成上述操作？

【问题讨论】：

标签： javascript jquery dom

【解决方案1】：

使用 jQuery，它可能看起来像这样：

function addStage(xmlDocument, stageElement){
  var parent = $(xmlDocument).find("test").parent(); //picks <test>'s parent
  parent.append(stageElement); //appends stageElement to parent
}

var xmlString = '<stages><params/><test description=""/></stages>'; //your XML string
var xmlDocument = $.parseXML(xmlString); //parses your XML string and returns XML document

$("#addStage").click(function(){
  var id = $("#stageId").val();
  var stageElement = $("<stage id=\"" + id + "\"></stage>"); //creates new element
  addStage(xmlDocument, stageElement);
  console.log(xmlDocument);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Stage ID: <input type="text" id="stageId" /> <input type="button" id="addStage" value="Add stage" />

打开浏览器的控制台查看结果。

【讨论】：

【解决方案2】：

使用普通的旧 JavaScript：

var text = "<stages><params/><test description=\"\"/></stages>";

var parser = new DOMParser();
var xmlDoc = parser.parseFromString(text,"text/xml");

var newNode = xmlDoc.createElement("stage");
newNode.setAttribute("id", "myId");
newNode.setAttribute("level", "1");
xmlDoc.documentElement.appendChild(newNode);

newNode = xmlDoc.createElement("stage");
newNode.setAttribute("id", "myId2");
newNode.setAttribute("level", "2");
xmlDoc.documentElement.appendChild(newNode);

console.log(new XMLSerializer().serializeToString(xmlDoc.documentElement));

在特定位置添加节点的参考，参考XML DOM Add Nodes

【讨论】：