Question

所以，我有一个带有不同div元素的HTML页面，我有一些加载xml文档的链接

XML文件看起来像这样：

<boxes>
 <div class="grid_4 box" id="siteBox">
  <h3>Lorem Ipsum</h3>
  <ul class="listItem">
   ...
  </ul>
 </div>
 <div class="grid_4 box" id="emplBox">
  <h3>Lorem Ipsum</h3>
  <ul class="listItem">
  ...
  </ul>
 </div>
</boxes>

我希望HTML页面中包含的所有div都被XML文件中的等效（相同ID）替换

这是我的javascript文件的开头。

function ajaxLink() {
 if (window.XMLHttpRequest) {
  xmlhttp = new XMLHttpRequest();
 } else {
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 }

 xmlhttp.onreadystatechange=function() {
  if (xmlhttp.readyState==4 && xmlhttp.status==200) {

   var xmlDoc = xmlhttp.responseXML.documentElement;

   for(var i = 0; i < xmlDoc.childElementCount; ++i) {
    c = xmlDoc.children[i]; //Element
    d = document.getElementById(c.getAttribute("id")); //HTMLDivElement

   }
  }
 }

 xmlhttp.open("GET", "file.xml", true);
 xmlhttp.send();
}

你能帮帮我吗？

谢谢

托马斯

Answer 1

`var newNode = document.createElement（'div'）;

//将ID，CLASS和innerHTML从c分配给newNode //

d.parentNode.replaceChild（newNode，d）;`

Answer 2

此代码未经测试。我想我会遵循你想做的事情。在返回响应之后的循环中，使用xml节点的innerXML更新文档节点的innerHTML。因为我不知道在Firefox和Chrome中获取innerXml的简单方法。

var tmp = document.createElement('div');
for(var i = 0; i < xmlDoc.childElementCount; ++i) {
    c = xmlDoc.children[i]; //Element
    d = document.getElementById(c.getAttribute("id")); //HTMLDivElement
    if (d) { 
        var xml = getXml(c);
        tmp.innerHTML = xml;
        d.innerHTML = tmp.firstChild.innerHTML;
    }
}

这是因为IE有一种不同的序列化XML方法。我不确定outerXML是您想要的，可能是xml或outerXml。

function getXml(node) {
    if (window.XMLSerializer) {
        return new XMLSerializer().serializeToString(node);
    }

    if (node.outerXML) {
        return node.outerXML;
    }

    return '';
}

用XML元素替换HTMLElement

2 个答案: