Question about nodes and innerHTML

[snarky]

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?

Thanks in advance.

[felgall]

The DOM structure is not updated when you use innerHTML. If you want to update the DOM structure you need to use the correct DOM calls instead.

[Markdidj]

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

[SimplyFu]

DOM structure should be updated although you use innerHTML.

[DougBTX]

The DOM structure is not updated when you use innerHTML.

This works fine:

<div id="test">
  Hello?
</div>

<script>
var div = document.getElementById("test");
div.innerHTML = "Hello <span>World!</span>";

var span = div.getElementsByTagName("span")[0];
span.style.color = "red";
</script>

Do you have an example where this does not work?

Douglas

[felgall]

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.

[DHTML Kitchen]

Whoa, looks like a lot of contradiction here!

This was discussed at JavaRanch. There was an example posted.

The conclusion?

InnerHTML does update the dom.

felgall - do you have a testcase showing that innerHTML does not update the DOM?

[DougBTX]

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.

Do you have a copy of the code which did not work, or something similar?

I'd really like to see an actual example of innerHTML not working.

Douglas

[felgall]

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.

[DougBTX]

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 edited the updDsp function to this:

function updDsp(mtz, dst, stdz, dayz, showDate) {
    var obj = document.getElementById('time');
    obj.innerHTML = setDsp(mtz, dst, stdz, dayz, showDate);
    setTimeout('updDsp(' + mtz + ',' + dst + ',"' + stdz + '","' + dayz + '","' + showDate + '")', 5000);
}

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.

Do you have a simpler example which shows the problem?

Douglas

[Akash Mehta]

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.

[SimplyFu]

well, but it is supported by most of the browser, we see from the truth than the standard

[SimplyFu]

by the way innerHTML will only work with table where TBODY is found, that is the catch

reading

[Markdidj]

DOM calls are the best, foolproof way to manipulate the DOM.

But they are also the hardest, IMO.

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.

($)html="<p>Some HTML</p>"(;)
(echo|response.write) ($)html(;)
(echo|response.write) "obj.innerHTML=("|\)""(&|.)($)html(&|.)"("|\)""(;)

Edit:

http://www.sitepoint.com/forums/showthread.php?t=201860
http://www.sitepoint.com/forums/showthread.php?t=374401

[felgall]

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.

[Markdidj]

That's fine felgall, but what is the point of doing all that work when there is an easier method that will use the existing PHP or ASP scripts that already output the HTML you require?

[felgall]

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.

[Markdidj]

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)

[DougBTX]

by the way innerHTML will only work with table where TBODY is found, that is the catch

reading

Is TBODY even mentioned on that page? I can't see anything about it.

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.

Douglas

[Kravvitz]

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

I suggest you read Microsoft's own documentation of it.

Here's a relevant excerpt:

The [innerHTML] property is read/write for all objects except the following, for which it is read-only: COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR.

[felgall]

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.

[DHTML Kitchen]

I suggest you read Microsoft's own documentation of it.

Here's a relevant excerpt:

Very relevant.

Thank you.

[DougBTX]

I suggest you read Microsoft's own documentation of it.

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.

Douglas