1

我正在做一个 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 使浏览器正确解释元素。这样，我可以避免对真正的 HTML 使用 responseText，也可以避免使用“innerHTML”，因为它不是标准。然而，大多数在线示例使用 innerHTML。这真的是最好的方法吗？

4

2 回答 2

2

如果它是格式良好的 HTML，您可以尝试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，看看这个跨浏览器实现。你的另一个选择是使用像 jQuery 这样的东西。它规范了很多跨浏览器的差异。

于 2011-04-15T21:47:05.640 回答
0

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

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

于 2011-04-15T21:54:53.093 回答