javascript innerHTML without childNodes?

Question

hi all

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.

Answer 2

I would expect this behavior in any browser as the += operand overwrites what is already in the table by definition. Two solutions:

Instead of receiving HTML code from your PHP file, have the PHP generate a list of items to add to the table. Comma/tab separated, whatever. Then use Table.addRow(), Row.addCell() and cell.innerHTML to add the items to the table. This is the way I would suggest doing it, no point in creating GUI elements in two separate files.

The other solution is to save all the form data that's already been entered to local JavaScript variables, append the table, and then reload the data into the form fields.

Answer 3

Well, returning a JSON object with the new data seems like the best option. Then, you can synthesize the extra table elements by using it.

In case one is forced to get plain HTML as response, it is possible to use var foo = document.createElement('div');, for example, and then do foo.innerHTML = responseText;. This creates an element that is not appended to anything, yet hosts the parsed HTML response.
Then, you can drill down the foo element, get the elements that you need and append them to the table in a DOM-friendly fashion.

Edit:

Well, I think I see your point now.
wrapper is a table element itself. The nodes reside under the tbody, a child of wrapper which is its lastChild (or you can access it via its tBodies[0] member, in Firefox).
Then, using the tBody element, I think that you would be able to get what you want.

BTW, You do not need to append the wrapper to the document before appending its children to the table, so no need to hide it etc.