没有childNodes的javascript innerHTML?

时间:2010-04-19 16:04:10

标签: javascript innerhtml textnode

我有一个火狐问题,我没有看到树木 使用ajax我从PHP脚本获取html源

这个html代码包含一个标签,在tbody中还有一些tr / td的

现在我想将这个tbody plaincode附加到现有表中。但还有一个条件:表格是表格的一部分,因此包含复选框和下拉菜单。如果我会使用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元素?

顺便说一句:顺便说一句,我不能给出一个完整的例子,因为我不能写一个较小的非工作代码 它是野外发生的那些错误之一,而不是我的testset

全部

3 个答案:

答案 0 :(得分:2)

您可能正在遇到遵循W3C规范的Firefox怪癖。在规范中,标签之间的空格是“文本”节点而不是元素。这些TextNode在childNodes中返回。 This other answer描述了一种解决方法。使用像JQuery这样的东西也会让这更容易。

答案 1 :(得分:0)

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

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

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

答案 2 :(得分:0)

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

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

修改:

嗯,我想我现在明白你的意思了 wrapper本身就是一个表元素。节点位于tbody下,wrapper的子节点是lastChild(或者您可以通过其tBodies[0]成员在Firefox中访问它。) 然后,使用tBody元素,我认为你将能够得到你想要的。

顺便说一下,在将子文件附加到表之前,您不需要将包装器附加到文档中,因此不需要隐藏它等。