SitePoint Sponsor

User Tag List

Results 1 to 23 of 23
  1. #1
    SitePoint Enthusiast
    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.

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,817
    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="^$">

  3. #3
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    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

  4. #4
    SitePoint Guru
    Join Date
    Apr 2007
    Posts
    813
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    DOM structure should be updated although you use innerHTML.

  5. #5
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    The DOM structure is not updated when you use innerHTML.
    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>
    Do you have an example where this does not work?

    Douglas
    Hello World

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,817
    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="^$">

  7. #7
    SitePoint Enthusiast
    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.

  8. #8
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    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
    Hello World

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,817
    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="^$">

  10. #10
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    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:

    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);
    }
    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
    Hello World

  11. #11
    SitePoint Zealot
    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.

  12. #12
    SitePoint Guru
    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

  13. #13
    SitePoint Guru
    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

  14. #14
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Akash Mehta View Post
    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.
    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

  15. #15
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,817
    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="^$">

  16. #16
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    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

  17. #17
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,817
    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="^$">

  18. #18
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    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

  19. #19
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SimplyFu View Post
    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.

    Quote Originally Posted by felgall View Post
    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
    Hello World

  20. #20
    CSS & JS/DOM Adept bronze trophy
    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
    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.
    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.

  21. #21
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,817
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Markdidj View Post
    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.
    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="^$">

  22. #22
    SitePoint Enthusiast
    Join Date
    Feb 2004
    Location
    Third Stone From The Sun
    Posts
    82
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz View Post
    I suggest you read Microsoft's own documentation of it.

    Here's a relevant excerpt:
    Very relevant.

    Thank you.
    My outdated site is down for a while now.

  23. #23
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz View Post
    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
    Hello World


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •