Question

我正在做一个Ajax请求，其中我让服务器返回格式良好的HTML，特别是表行（“tr”）元素。我曾希望通过读取请求对象（XMLHttpRequest）上的“responseXML”成员来使用DOM将这些行插入到表中。基本上，我有

var myTable = document.getElementById("myTable");
var tableRows = responseXML.getElementsByTagName("tr");
for (var i = 0; i < tableRows.length; i++) {
  myTable.appendChild(tableRows[i]);
}

很多事情就在这里。 “responseXML”包含正确的数据，对“getElementsByTagName”的调用也可以正常工作。可悲的是，当我尝试通过调用appendChild添加一行时，它会崩溃（我得到一个模糊的javascript错误）。我认为这是因为虽然“tableRows”数组中的每个项都是正确的XML元素，但浏览器不能自动将其解释为HTML元素。我注意到如果我使用document.createElement（“tr”）创建一个新的并在运行时检查它，它在内存中看起来与“tableRows”数组中的项不同。此外，我可以将新的（使用“createElement”创建的那个）插入表中而不会出错。

有没有一个好方法可以做我想在这里做的事情？我希望通过将内容作为XML并使用responseXML / getElementsByTagName来使浏览器正确解释元素。这样，我可以避免将responseText用于真正的HTML，我也可以避免使用“innerHTML”，因为它不是标准。但是，大多数在线示例都使用innerHTML。这真的是最好的方式吗？

Answer 1

如果格式正确，您可以尝试使用document.importNode()，如下所示：

//myXHTML is your HTML/XHTML (if it is well-formed, you should be ok).
//myObject is the parent node. This is the node you want to insert your HTML into
function insertXHTML(myXHTML, myObject) {
   var parser = new DOMParser();

   //Doing this to make sure that there is just one root node.
   //You can change the namespace, or not use it at all.
   var xmlToParse = "<div xmlns = \"http://www.w3.org/1999/xhtml\">" + myXHTML + "</div>";
   var XMLdoc = parser.parseFromString(xmlToParse, "application/xhtml+xml");

   var root = XMLdoc.documentElement;

   for(i = 0; i < root.childNodes.length; i++) {
       myObject.appendChild(document.importNode(root.childNodes[i], true));
   }
}

这是我前一段时间写的代码（绕过innerHTML的使用）;它应该仍然有效。我唯一担心的是DOMParser();不确定它是如何跨浏览器的。

修改

你的方法（只用纯JS做事）的问题是你会遇到跨浏览器的问题:(。对于importNode，请看一下this cross-browser implementation。你的其他选择是使用像jQuery这样的东西。它规范了许多跨浏览器的差异。

Answer 2

如果XMLHTTPResponse中的唯一内容是页面上table元素的内容，那么使用document.getElementById（'myTable'）。innerHTML = responseXML;

我想说这是异步更新HTML的标准。

将Ajax ResponseXML转换为HTML

2 个答案: