SitePoint Sponsor |
|
User Tag List
Results 1 to 23 of 23
-
May 15, 2007, 12:28 #1
- Join Date
- Sep 2006
- Posts
- 72
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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?
Thanks in advance.
-
May 15, 2007, 13:12 #2
- Join Date
- Sep 2005
- Location
- Sydney, NSW, Australia
- Posts
- 16,875
- Mentioned
- 25 Post(s)
- Tagged
- 1 Thread(s)
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.
Stephen J Chapman
javascriptexample.net, Book Reviews, follow me on Twitter
HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
<input name="html5" type="text" required pattern="^$">
-
May 16, 2007, 05:00 #3
- Join Date
- Sep 2002
- Location
- Bournemouth, South UK
- Posts
- 1,551
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
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
LiveScript: Putting the "Live" Back into JavaScript
if live output_as_javascript else output_as_html end if
-
May 16, 2007, 05:31 #4
- Join Date
- Apr 2007
- Posts
- 813
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
DOM structure should be updated although you use innerHTML.
-
May 16, 2007, 11:42 #5
- Join Date
- Nov 2001
- Location
- Bath, UK
- Posts
- 2,498
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
This works fine:
HTML Code:<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>
DouglasHello World
-
May 16, 2007, 14:32 #6
- Join Date
- Sep 2005
- Location
- Sydney, NSW, Australia
- Posts
- 16,875
- Mentioned
- 25 Post(s)
- Tagged
- 1 Thread(s)
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.
Stephen J Chapman
javascriptexample.net, Book Reviews, follow me on Twitter
HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
<input name="html5" type="text" required pattern="^$">
-
May 16, 2007, 17:58 #7
- Join Date
- Feb 2004
- Location
- Third Stone From The Sun
- Posts
- 82
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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?My outdated site is down for a while now.
-
May 16, 2007, 19:15 #8
-
May 16, 2007, 19:55 #9
- Join Date
- Sep 2005
- Location
- Sydney, NSW, Australia
- Posts
- 16,875
- Mentioned
- 25 Post(s)
- Tagged
- 1 Thread(s)
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.Stephen J Chapman
javascriptexample.net, Book Reviews, follow me on Twitter
HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
<input name="html5" type="text" required pattern="^$">
-
May 16, 2007, 20:29 #10
- Join Date
- Nov 2001
- Location
- Bath, UK
- Posts
- 2,498
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I edited the updDsp function to this:
Code: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); }
Do you have a simpler example which shows the problem?
DouglasHello World
-
May 16, 2007, 23:32 #11
- Join Date
- Jan 2007
- Location
- Australia
- Posts
- 137
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
Check out my SitePoint articles and blog posts!
-
May 17, 2007, 00:27 #12
- Join Date
- Apr 2007
- Posts
- 813
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
well, but it is supported by most of the browser, we see from the truth than the standard
-
May 17, 2007, 00:46 #13
- Join Date
- Apr 2007
- Posts
- 813
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
by the way innerHTML will only work with table where TBODY is found, that is the catch
reading
-
May 17, 2007, 03:52 #14
- Join Date
- Sep 2002
- Location
- Bournemouth, South UK
- Posts
- 1,551
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
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.Code:($)html="<p>Some HTML</p>"(;) (echo|response.write) ($)html(;) (echo|response.write) "obj.innerHTML=("|\)""(&|.)($)html(&|.)"("|\)""(;)
Last edited by Markdidj; May 17, 2007 at 04:47. Reason: Reference Links For addScript and changeScript
LiveScript: Putting the "Live" Back into JavaScript
if live output_as_javascript else output_as_html end if
-
May 17, 2007, 04:21 #15
- Join Date
- Sep 2005
- Location
- Sydney, NSW, Australia
- Posts
- 16,875
- Mentioned
- 25 Post(s)
- Tagged
- 1 Thread(s)
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.Stephen J Chapman
javascriptexample.net, Book Reviews, follow me on Twitter
HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
<input name="html5" type="text" required pattern="^$">
-
May 17, 2007, 04:41 #16
- Join Date
- Sep 2002
- Location
- Bournemouth, South UK
- Posts
- 1,551
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
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?
LiveScript: Putting the "Live" Back into JavaScript
if live output_as_javascript else output_as_html end if
-
May 17, 2007, 05:10 #17
- Join Date
- Sep 2005
- Location
- Sydney, NSW, Australia
- Posts
- 16,875
- Mentioned
- 25 Post(s)
- Tagged
- 1 Thread(s)
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.Stephen J Chapman
javascriptexample.net, Book Reviews, follow me on Twitter
HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
<input name="html5" type="text" required pattern="^$">
-
May 17, 2007, 05:28 #18
- Join Date
- Sep 2002
- Location
- Bournemouth, South UK
- Posts
- 1,551
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
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)LiveScript: Putting the "Live" Back into JavaScript
if live output_as_javascript else output_as_html end if
-
May 17, 2007, 08:43 #19
- Join Date
- Nov 2001
- Location
- Bath, UK
- Posts
- 2,498
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Is TBODY even mentioned on that page? I can't see anything about it.
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.
DouglasHello World
-
May 17, 2007, 15:09 #20
- Join Date
- Mar 2005
- Location
- USA
- Posts
- 5,482
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Come on, they invented it! They're not going to be the most fussy about 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.We miss you, Dan Schulz.
Learn CSS. | X/HTML Validator | CSS validator
Dynamic Site Solutions
Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.
-
May 17, 2007, 15:19 #21
- Join Date
- Sep 2005
- Location
- Sydney, NSW, Australia
- Posts
- 16,875
- Mentioned
- 25 Post(s)
- Tagged
- 1 Thread(s)
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.Stephen J Chapman
javascriptexample.net, Book Reviews, follow me on Twitter
HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
<input name="html5" type="text" required pattern="^$">
-
May 17, 2007, 20:26 #22
- Join Date
- Feb 2004
- Location
- Third Stone From The Sun
- Posts
- 82
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
May 18, 2007, 16:57 #23
- Join Date
- Nov 2001
- Location
- Bath, UK
- Posts
- 2,498
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
DouglasHello World
Bookmarks