Question

编辑：使标题更具体，以解决重复问题。

我的HTML页面有button和div。当用户单击该按钮时，函数将运行XMLHttpRequest以从XML文件中获取表。该表应插入div。

AJAX请求向我的变量返回object Element。如何将该变量的内容（即XML文件中的<table><tr><td>...等）插入div？

这是JavaScript：

function table_loadContent() {

    var request;

    if (window.XMLHttpRequest) {

        request = new XMLHttpRequest();
        console.log("HTTPRequest");

    } else {

        request = new ActiveXObject("Microsoft.XMLHTTP");
        console.log("ActiveX");

    }

    request.open('GET', 'myXMLFile.xml');

    request.onreadystatechange = function() {

        if ((request.readyState === 4) && (request.status === 200)) {

            var newTable = request.responseXML.getElementsByTagName('table');
            document.getElementById('myDiv').appendChild(newTable);

        }

    }

    request.send();

}

我尝试过的变化不起作用：

document.getElementById("myDiv").innerHTML = myVar;
document.getElementById("myDiv").appendChild(myVar);
document.getElementById("myDiv").appendChild(myVar[0]);
与上述相同，但使用第二个变量来保存.toString()版本
尝试将XML文件声明为XML和HTML
var newTable = request.responseXML.getElementById('myTable');

Answer 1

在下一个代码中：

newTable

document.getElementById('myDiv').appendChild(newTable[0]);变量是HTMLCollection，它不是元素。

如果你想只追加集合中的第一个元素，你可以使用：

div

如果要添加集合中的所有节点，则需要在集合中进行迭代并添加到var newTable = request.responseXML.documentElement.querySelectorAll('table'); var myDiv = document.getElementById('myDiv'); [].forEach.call(newTable, function (table) { myDiv.appendChild(table) });中包含的每个元素：

querySelectorAll

备注：
  1 - 我使用了DOM方法，因为它是a not-live HTMLCollection，可用于修改documentElement而无需修改集合。
  2 - 使用responseXML的{{1}}属性确保您选择主文档节点。

Answer 2

我们发现了解决方案：

通过更改行：

var newTable = request。 responseXML.getElementsByTagName（'table'） 的document.getElementById（ 'myDiv'）的 .appendChild（newtable的）

到

var newTable = request。 responseText document.getElementById（'myDiv'）。 innerHTML = newTable

它按照我们的意愿行事。（编辑挫折：我无法让它正确地破坏线条）

将元素从XML追加到div，而不使用jQuery

2 个答案:

通过更改行：

到