The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Question about nodes and innerHTML

If I manipulate the a div through javascript and insert a table within the div using innerHTML, what happens to the DOM structure? Are the child nodes creates automatically (and can they be manipulated directly) or do I have to go through the create element/append child process for that?

The dom structure may not be updated within the browser, but it is updated within the webpage. I use this as the main controller of my site (www.livescript.co.uk) changing the main div with innerHTML. I can then access the new innerHTML with the DOM, and do this using a function that is remembered by javascript. It does seem to work in all browsers that I and a friend have tested it in, both on a PC and a MAC

With the script I have at http://javascript.about.com/library/bldtime2.htm I originally tried to use innerHTML in the updDsp() function and it did not work there. Mixing innerHTML and DOM commands does not always work - the version of the page that the innerHTML works with is not necessarily the one that has the DOM updates applied (and vice versa). It would depend on the browser as to whether the browser keeps the two in step with one another so mixing DOM commands with innerHTML may or may not work depending on the browser you test in. If you use one or the other and don't mix them then you shouldn't have a problem.

Just substitute innerHTML for firstChild.data in that code and you get an example of where innerHTML doesn't work for inserting plain text into a span.

I can't remember whether it was IE, Firefox, Opera, or all three that didn't work with innerHTML in that code but I do remember having to change it to firstChild.data before the code would work properly in all three browsers.

I can't remember whether it was IE, Firefox, Opera, or all three that didn't work with innerHTML in that code but I do remember having to change it to firstChild.data before the code would work properly in all three browsers.

And it still seems to work fine in Safari and Firefox. Well, I say it works fine, but in Safari it says that the time is 5:54 AM (AEST), and in Firefox it says the time is 1:26 PM (AEST), so I'm thinking the code is buggy anyway.

As far as I'm aware, innerHTML isn't part of the javascript/dom standard, just most of the major browsers support it. Its possible Opera wouldn't update the DOM to update when you modify it or some other less used browser. DOM calls are the best, foolproof way to manipulate the DOM.

If you use the DOM to update your javascript source,see...http://www.sitepoint.com/forums/showthread.php?t=135179
and it works then it is more than likely innerHTML's DOM will be updated automatically. If updating the source of the javascript doesn't work, then the new external javascript isn't called, and the use of the innerHTML from within the external js will also not be called. As you should only use javascript to enhance a website, then this is a really good method.

TIP
Using innerHTML will allow you to use your PHP and ASP scripts that usually output HTML to output javascript that outputs HTML.

Either using innerHTML exclusively or DOM commands exclusively gives more consistent results than trying to mix them together. Thinking back I think it is Internet Exploder that doesn't like them mixed together - it is way fussier about how innerHTML can be used than the other browsers.

My script (referred to earlier in this thread) works fine in all the different versions of IE, Firefox, Opera, Mozilla, and Netscape that I tested in. I couldn't test in Safari because I don't have a Mac and I have no explanation for why Safari produces incorrect results for timezone calculations that work in all other version 5+ browsers.

Because the PHP or ASP can't update the time on the page continuously and because the subject of the site is JavaScript and because I don't have access to upload any server side scripts there (so I can't even upload Ajax demos that would be relevant to the site).

Of course if you have server side access then you really only need JavaScript to keep the time up to date after the page displays but not everyone has access to add times to their page that way which is why I wrote the JavaScript version.

felgall, with the addScript and changeScript functions you can call an external js from another site. If you want to provide some server side type javascript updating you can use a server that does support server side scripts.

you can even pass variables through the function, ie,
changeScript("http://www.example.com/index.php?method=js&variable=true");
or
changeScript("http://www.example.com/index.php?method=js&variable=" + variable)

Thinking back I think it is Internet Exploder that doesn't like them mixed together - it is way fussier about how innerHTML can be used than the other browsers.

Come on, they invented it! They're not going to be the most fussy about it

I think if we have no examples of it being a problem, and we can't write examples of it being a problem even when we try, then it is probably just a myth that mixing innerHTML and DOM is a problem. Perhaps it was an issue in the version 4 days, but we're well beyond that now.

If you want to provide some server side type javascript updating you can use a server that does support server side scripts.

A bit pointless providing a PHP way of doing something when the topic for the site is JAVASCRIPT. Doing so would mean that the page is not relevant to the site and therefore would not belong there in the first place. If I were to start posting information like that as JavaScript content then I would probably lose the job of providing JavaScript content for about.com since the pages would not be covering the topic I am supposed to be writing about.

It is interesting to note that none of those elements have directly displayed HTML content, unlike a div or a td for example. I'm not sure what setting the innerHTML of a <col> tag would do.

Also note that this isn't an example of innerHTML not interacting properly with the DOM. Wherever you can set innerHTML, the correct DOM nodes are created. That isn't to say that you can use innerHTML anywhere you can use the DOM - for example you can't use it to set attributes on existing elements.

You are right that you can't set innerHTML on structural table elements in IE, it's a bit of a shame, as it works in other browsers. Recently I was working on a table which had to be interactive - my solution was to create a temporary table in a div using innerHTML, then use IE's swapNode method to push the new TRs into the table. Seems to work quite well.