Question

im having a firefox issue where i dont see the wood for the trees
using ajax i get html source from a php script

this html code contains a tag and within the tbody some more tr/td’s

now i want to append this tbody plaincode to an existing table. but there is one more condition: the table is part of a form and thus contains checkboxe’s and drop down’s. if i would use table.innerHTML += content; firefox reloads the table and reset’s all elements within it which isnt very userfriendly as id like to have

what i have is this

// 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
}

either this is so trivial that i dont see the problem OR
its a corner case and i hope someone here has that much of expirience to give an advice on this – anyone can imagine why i get textnodes and not the finally parsed dom elements i expect?

btw: btw i cant give a full example cause i cant write a smaller non working piece of code
its one of those bugs that occure in the wild and not in my testset

thx all

Answer 1

You are probably running into a Firefox quirk of following the W3C spec. In the spec the whitespace between tags are “text” nodes instead of elements. These TextNodes are returned in childNodes. This other answer describes a workaround. Also Using something like JQuery makes this much easier.