www.webdeveloper.com
Results 1 to 15 of 15

Thread: to innerHTML or not to innerHTML ???

  1. #1
    Join Date
    Sep 2009
    Posts
    15

    to innerHTML or not to innerHTML ???

    After seeking some advice here i was advised that i should not be using the innerHTML attribute in my javascript code, as the W3 are going to be deprecating it!

    I have recentlybought a new javascript book that actually says the innerHTML WAS going to be deprecated, but now, will be the preferred methos with the release of html 5!

    now i'm confused.....anyone shed any light on this please??

    the book advises that the only forseeable problem with innerHTML against DOM is that you have to escape your own code when passing html to an element.....not a massive problem surely??

  2. #2
    Join Date
    Sep 2009
    Location
    Sheffield
    Posts
    4
    I've always been against innerHTML and preferred to use the DOM. I too am in two minds about this. One thing is certain though, innerHTML can be good if speed is an issue.

  3. #3
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    except for a few well-publicized limitations like <options> in ie, non-firing <script> tags, etc, .innerHTML is by far the fastest, easiest, and most compatible way of injecting remote content.

    since the W3 never sanctioned it, .innerHTML was never "going to be deprecated", which would imply a recommendation in the first place...

    there is no real reason to be afraid of innerHTML, often less-knowledgeable people grab onto an inch of valid concern and turn it into a mile of flaming antagonism, often for no greater reason than attempting to demonstrate their own apparent self-expertise, rather than trying to offer pragmatic advise. I've seen this happen with innerHTML, eval, and document.write.
    Last edited by rnd me; 09-18-2009 at 06:38 PM.

  4. #4
    Join Date
    Sep 2009
    Location
    London
    Posts
    51
    innerHTML is the only option that is guaranteed to work on all browser i.e. mobile devices and PC. It is fast and easy to use.

  5. #5
    Join Date
    Aug 2007
    Posts
    3,767
    Basically, avoid innerHTML when (for a non-inclusive list):
    1) Using tables, or the issues rnd_me mentioned, unless you know you are avoiding them.
    2) Adding or removing, or doing anything with, elements that you later want to reference by DOM methods.

    innerHTML is excellent for complicated changes that do not need to be referenced by DOM methods. For small changes, speed becomes irrelevant, so you might as well use DOM methods it's only theoretically faster.

  6. #6
    Join Date
    Sep 2009
    Posts
    15
    some really interesting responses thanks guys.

    In short......carry on using the innerHTML attribute and ignore people trying to sound better than they actually are?

    Thanks again

  7. #7
    Join Date
    Dec 2005
    Posts
    2,984
    Quote Originally Posted by thanweb View Post
    some really interesting responses thanks guys.

    In short......carry on using the innerHTML attribute and ignore people trying to sound better than they actually are?

    Thanks again

    Absolutely not. Declan makes a clear point where people often mistakingly use innerHTML and then can't get other script functions to work:

    2) Adding or removing, or doing anything with, elements that you later want to reference by DOM methods
    If you don't need to reference any elements that you are inserting, then sure, stick them all in a big string and spit them out onto your page, but if you are going to need to reference them, then, if you want your scripts to work reliably cross browser, create all the individual elements with JS DOM Methods and avoid innerHTML for anything that is not simply text.

  8. #8
    Join Date
    Sep 2009
    Posts
    15
    ok thanks for the advice.....i am more used to using php so innerHTML to me is a bit similar to declaring a variable and echo'ing it in the html.....the same as in sense of simplicity i mean.

  9. #9
    Join Date
    Aug 2007
    Posts
    3,767
    I forget to add that innerHTML doesn't work with XHTML. So if the page is parsed as XHTML, it will not work. An XHTML Doctype doesn't mean the page is parsed as XHTML, but it's just something to be aware of.

  10. #10
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Quote Originally Posted by Declan1991 View Post
    I forget to add that innerHTML doesn't work with XHTML. So if the page is parsed as XHTML, it will not work. An XHTML Doctype doesn't mean the page is parsed as XHTML, but it's just something to be aware of.
    it works with transitional+text/html, not with strict+application/xml mime.

    then again, i can't remember ever seeing a real page served in strict (since it wont work in IE), so this should not be a problem.

    W3 is deprecating most of XHTML strict's rules (XHTML is dying), so .innerHTML is a full-fledged standard under HTML5, and the minor bugs noted on the thread should be fixed by it.

    i said should...


    now, innerHTML is fine for about everything but <option>,<tr>, and <script>...

  11. #11
    Join Date
    Sep 2009
    Posts
    15
    hey some really interesting pionts there 'rnd me' cheers.

    I am currently learning what i can about DOM as well and will try to use them both where necessary.

    For some reason the course i did never covered DOM in too much detail and was literally just a page in the whole book expolaining that DOM means that any node or text node can be called using document.getElementById("") etc etc or forms ike document.myForm.myTextField.value etc etc.

    Just one thing is really puzzling me in the new book i got..... appendChild() - i dont understand quite what this does??

    Append is not a word i've ever come across before so the meaning of it may be why it is stumping in my coding.....i'm guessing it is an American English term not an English word as it is new to me lol.....or i paid very little attention at school....which is more likely the real reason.

    I see at dictionary.com it says to attach so for example i could do the following.....

    [script]
    window.onload = initAll;

    function initAll() {
    document.getElementsByTagName("form")[0].onsubmit = function() {return addNode();}
    }

    function addNode() {
    var inText = document.getElementById("textArea").value;
    var newText = document.createTextNode(inText);

    var newGraf = document.createElement("p");
    newGraf.appendChild(newText);

    var docBody = document.getElementsByTagName("body")[0];
    docBody.appendChild(newGraf);

    return false;
    }
    [/script]

    am i correct to assume that appendChild() means to attach or add a new child Node below the current one being called in the document.getElementById("textArea") part of the script??

  12. #12
    Join Date
    Dec 2005
    Posts
    2,984
    Not exactly, use the two terms together 'append' AND 'child' - a child node is always, by definition, contained within a parent, so appendChild in your example would add a node to the end of the body element.

    append, in this case, simply means "add to the end" so

    Code:
    document.getElementById('yourid').appendChild(yournode);
    Would place yournode at the end of (i.e. after all the other nodes contained within) the element with id 'yourid'.

  13. #13
    Join Date
    Feb 2006
    Posts
    198
    also for seo purposes innerHTML is a poor choice

  14. #14
    Join Date
    Dec 2005
    Posts
    2,984
    Any content that can be loaded only through Javascript is a 'poor choice' for SEO purposes, whether it be through innerHTML or alternative DOM method.

  15. #15
    Join Date
    Jan 2007
    Location
    Wisconsin
    Posts
    2,120
    I have been preferring DOM methods over innerHTML lately, largely because using the DOM methods simultaneously puts the object on the page and returns a reference to that object (since I needed the reference to put it there!). This avoids having to "look for" the item later when I need it. It's already stored in an indexed array somewhere (presuming I created it as part of an indexed array).

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles