To use appendChild or not to use appendChild, that is the question

appendChild vs. innerHTML

[Dabrowski]

I'd like some oppinions on this, I often inset nodes into page content by using:

myObj.innerHTML += "<p>New text!</p>";

or

myObj.innerHTML = "<p>New text!</p>" +myObj.innerHTML;

This method seems to work fine in IE and FF. And I can then look these elements up by getElementsByWhatever......etc...

Apart from the fact this only works for the beginning and the end, what are the pros and cons of this method vs. appendChild or insertBefore? Is there a right or wrong way? Cos this way sure is easier than that whole createNode, setAttribute, textNode stuff.

[cmarshall]

I think the biggest difference is the time it takes the browser to process the content.

Remember that it all has to be parsed and rendered into an internal Document Object Module, which takes some work.

I just ran into this issue [webmasterworld.com], in a slightly different manner.

Also, you can't output JavaScript in innerHTML and execute it. You need to plug JavaScript functions directly into the DOM and execute it in the execution thread. With JavaScript, you have no choice.

[Dabrowski]

Which begs the question, why use Javascript to output javascript? Why not just execute it anyway?

The function in question is my anti-widescreen page wrapper idea. It's working really well actually, I'm dead chuffed with myself.

[cmarshall]

Which begs the question, why use Javascript to output javascript? Why not just execute it anyway?

I think this is mostly an AJAX thing. AJAX generates XHTML in its most basic form, so people get used to using innerHTML. A lot of DHTML tricks also like using innerHTML.

The problem is really a DOM implementation issue. They shouldn't have two different code paths that result in two different behaviours for similar stimulus.

Here are a couple of threads where they are doing something like that:

[webmasterworld.com...]

[webmasterworld.com...]

[Dabrowski]

I also have a nasty feeling it breaks child nodes.

My TABLE fixing code uses offsetHeight to work out total table height. After using innerHTML to prepend an element, offsetHeight is now always 0. Also, parentNode is null.

This appears to be propogated to ALL nested child nodes also, hence breaking the entire DOM. Will try insertBefore and report back.

[Dabrowski]

ok wasted 2 hours.

2 functions were running simultaneously, that appeared to be causing the error. I set a timeout to run the second function and suddenly offsetHeight worked again.

Must have been messing with it before the DOM had adjusted. Although it doesn't explain why further calls after onLoad to offsetHeight would fail.

[Dabrowski]

The plot thickens, that wasn't the problem, and I have no idea why that fixed it.

I am making my own data structure about tables, and storing the object reference in the data, e.g.

function table( obj) {
this.obj = obj;
this.somethingelse = something;
etc......
}

var tables = new Array();
var tblTags = document.getElementsByTagName( "TABLE");
for( var t = 0; t < tblTags.length; t++)
tables.push( new table( tblTags[ t]));

Now we have an array of objects, one element is .obj which is a reference to the DOM object on screen.

This works fine, the problem is once I mess with one of the tables, any nested table I've stored in my data structure loses SOME of it's properties. In this case offsetHeight and parentNode. No idea why. If I run the getElementsByTagName again and replace the object, no problems.

Any ideas?

P.S. cmarshall, this is for my table fixing code you've seen the demo of, although it appears is still a work in progress!

[cmarshall]

I'll bet that this is the way it's supposed to happen. I'll give it some thought when I get more time (ha-ha).

A good place to look is quirksmode [quirksmode.com]. He's one of the guys that helped design the DOM, so there's a chance there's an answer there.

[Dabrowski]

Nah it just means I have to rewrite half the code!

At the moment I grab the table data into my own structure onload, then just refer to it after that. Thought it'd save some cycles, but I'll just get it to do the whole routine every time.

Regardless if that's how it's supposed to happen or not, it would appear I still need to do this to get it to work. I've also added IFRAME support as I found my frames were not automatically adjusting to their new surroundings.