Javascript innerHTML without childNodes?
im with firefox issue where i can't see tree for trees using ajax i get html source from php script
this html code contains a tag and inside tbody some more tr / td
Now I want to add this normal tbody code to an existing table. but there is one more condition: the table is part of the form and therefore contains checkboxe and drop down's. if i used table.innerHTML + = content; firefox reloads the table and reset all elements inside it that are not very user friendly, like an id to have
that i have it
// 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 it's so trivial that I don't see the problem OR its a corner case, and I hope someone here has that much experience to give advice on this - anyone can imagine why I'm getting text nodes, and not finally parsed dom elements I expect?
btw: btw i cant give a complete example because i cant write less non-working piece of code its one of those bugs that happen in the wild and not in my tests
thanks all
a source to share
You are likely running into a Firefox quirk following the W3C spec. In the specification, spaces between tags are "text" nodes, not elements. These TextNodes are returned in childNodes. This other answer describes a workaround. Also using something like JQuery makes this much easier.
a source to share
I would expect this behavior in any browser, as the + = operand overwrites what is already in the table by definition. Two solutions:
Instead of getting HTML from your PHP file, create PHP to 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 items to the table. So I suggest doing it, there is nothing to create GUI elements in two separate files.
Another solution is to save all the form data that has already been entered into local JavaScript variables, add a table, and then reload the data into the form fields.
a source to share
Well, returning a JSON object with new data seems like the best option. Then you can synthesize additional table elements using it.
In case you are forced to get simple HTML as a response, you can use, for example var foo = document.createElement('div');
, and then do foo.innerHTML = responseText;
. This creates an element that is not added to anything, but contains a rendered HTML response.
Then you can expand the element foo
, get the elements you want , and add them to the DOM-enabled table.
Edit:
Okay, I think I can see your moment now. wrapper
- the table element itself. The nodes are under the body, the child wrapper
that is it lastChild
(or you can access it through its member tBodies[0]
in Firefox).
Then using the tBody element I think you should be able to get what you want.
BTW, you don't need to add a wrapper to the document before adding its children to the table, so you don't need to hide them, etc.
a source to share