Question

在AJAX查询之后，返回XML文件。我能够“解析”该文件，但是当涉及到获取元素的“innerHTML”（或者在本例中为“innerXML”）时，问题就出现了。

如果XML元素（比如说“content”）只包含我可以执行的文本：content.childNodes[0].nodeValue（假设 content 引用XML元素“content”）。但该元素包含其他元素：

<stackoverflow reason="tribute to this page">
   <content>
      <div><span><p>Some more HTML elements</p></span></div>
   </content>
</stackoverflow>

我需要将<{1}}的内容复制到页面中的现有<content>，我该怎么做？

实施例。 <div>

Answer 1

尝试将HTML放在CDATA标记中，如下所示：

<stackoverflow reason="tribute to this page">
   <content>
      <![CDATA[<div><span><p>Some more HTML elements</p></span></div>]]>
   </content>
</stackoverflow>

然后只需通过innerHTML将数据插入您的元素。

document.getElementById('target').innerHTML = content.childNodes[0].nodeValue;

Answer 2

innerHTML是一个根本不应该使用的黑客。相反，请使用普通的DOM函数：

myDiv.appendChild(document.adoptNode(content));

Answer 3

您还可以使用XMLSerializer将xml节点转换回字符串表示形式，然后使用innerHTML将其复制到元素：

div.innerHTML = 
  (new XMLSerializer()).serializeToString(content.childNodes[0].nodeValue)

然而，phihag指出的解决方案看起来更安全。但是，我也没有测试，我也不确定浏览器兼容性。

Answer 4

您可以使用cloneNode和appendChild：

myDiv.appendChild(content.childNodes[0].cloneNode(true));

Answer 5

如果你想使用innerHTML，这里是如何将第一个Element的XML标记转换为字符串

//Where oXML is the xml document or xml object
var XMLString;
oXML=oXML.getElementsByTagName('content')[0].firstChild;
//nodeType 1-Element,2-Attr,3-Text.....
while(oXML.nodeType!=1){oXML=oXML.nextSibling;}
//code for IE and Mozilla, Firefox, Opera, etc. respectively
XMLString=(oXML.xml)?oXML.xml:(new XMLSerializer()).serializeToString(oXML);
myDiv.innerHTML=XMLString;

while ...用于查找内容标记中的第一个元素，跳过文本nodeType。 Firefox添加文本nodeType，当文本节点内没有文本时，IE6不会。

如何获取XML文档（AJAX）的innerHTML？

5 个答案: