javascript innerHTML 没有子节点？

Question

我遇到了 Firefox 问题，我看不到树木的木材 使用ajax，我从php脚本中获取html源代码，

此html代码包含一个标签，并且在tbody中还有更多tr/td，

现在我想将此tbody纯代码附加到现有表中。但还有一个条件：表格是表单的一部分，因此包含复选框和下拉列表。如果我会使用 table.innerHTML += content; firefox 重新加载表格并重置其中的所有元素，这不是很用户友好，因为 id 喜欢拥有

我拥有的东西，

// content equals transport.responseText from ajax request
function appendToTable(content){
    var wrapper = document.createElement('table');
    wrapper.innerHTML = content;
    wrapper.setAttribute('id', 'wrappid');
    wrapper.style.display = 'none';
    document.body.appendChild(wrapper);

    // get the parsed element - well it should be
    wrapper = document.getElementById('wrappid');
    // the destination table
    table = document.getElementById('tableid');

    // firebug prints a table element - seems right
    console.log(wrapper);
    // firebug prints the content ive inserted - seems right
    console.log(wrapper.innerHTML);

    var i = 0;
    // childNodes is iterated 2 times, both are textnode's
    // the second one seems to be a simple '\n'
    for(i=0;i<wrapper.childNodes.length;i++){
        // firebug prints 'undefined' - wth!??
        console.log(wrapper.childNodes[i].innerHTML);
        // firebug prints a textnode element - <TextNode textContent=" ">
        console.log(wrapper.childNodes[i]);
        table.appendChild(wrapper.childNodes[i]);
    }
    // WEIRD: firebug has no problems showing the 'wrappid' table and its contents in the html view - which seems there are the elements i want and not textelements
}

这要么是微不足道的，我没有看到问题，要么 这是一个极端的情况，我希望这里有人有足够的经验对此提出建议 - 任何人都可以想象为什么我得到文本节点而不是我期望的最终解析的 dom 元素？

顺便说一句：顺便说一句，我无法给出完整的示例，因为我无法编写较小的非工作代码 这是在野外发生的错误之一，而不是在我的测试集中，

谢谢大家

Answer 1

您可能遇到了 Firefox 遵循 W3C 规范的怪癖。在规范中，标签之间的空白是“文本”节点而不是元素。这些 TextNode 在 childNode 中返回。 这个其他答案 描述了一种解决方法。使用 JQuery 之类的东西也可以使这变得更容易。

Answer 2

我希望在任何浏览器中都会出现这种行为，因为 += 操作数会根据定义覆盖表中已有的内容。两种解决方案：

让 PHP 生成要添加到表中的项目列表，而不是从 PHP 文件接收 HTML 代码。逗号/制表符分隔，无论如何。然后使用 Table.addRow()、Row.addCell() 和 cell.innerHTML 将项目添加到表中。这是我建议这样做的方式，在两个单独的文件中创建 GUI 元素是没有意义的。

另一种解决方案是将已输入的所有表单数据保存到本地 JavaScript 变量中，附加表，然后将数据重新加载到表单字段中。

Answer 3

好吧，返回带有新数据的 JSON 对象似乎是最好的选择。然后，您可以使用它来合成额外的表格元素。

如果被迫获取纯 HTML 作为响应，可以使用 var foo = document.createElement('div');，例如，然后执行 foo.innerHTML =响应文本；。这将创建一个未附加到任何内容的元素，但托管已解析的 HTML 响应。
然后，您可以深入了解 foo 元素，获取所需的元素，并以 DOM 友好的方式将它们附加到表中。

编辑：

好吧，我想我现在明白你的观点了。
wrapper 本身就是一个表格元素。这些节点位于 tbody 下，tbody 是 wrapper 的子级，tbody 是其 lastChild （或者您可以通过其 tBodies[0] 成员访问它，在火狐浏览器中）。
然后，使用 tBody 元素，我认为您将能够得到您想要的。

顺便说一句，在将其子项附加到表之前，您不需要将包装器附加到文档，因此无需隐藏它等。