Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    document.innerHTML alternatives

    So I'm fairly new to javascript, and I've mostly been using .innerHTML to manipulate text and other HTML elements. However reading around, most people have a very unfavorable view on this method. So my question is: What do you guys use and why is it better? or Why is .innerHTML frowned upon?

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Quote Originally Posted by kduan View Post
    So I'm fairly new to javascript, and I've mostly been using .innerHTML to manipulate text and other HTML elements. However reading around, most people have a very unfavorable view on this method. So my question is: What do you guys use and why is it better? or Why is .innerHTML frowned upon?
    Is it? It is true that innerHTML is non-standard, but all browsers support it.

    http://www.quirksmode.org/dom/innerhtml.html
    "The most obvious conclusion of these tests is that innerHTML is faster than "real" W3C DOM methods in all browsers. The W3C DOM table methods are slow to very slow, especially in Explorer." And innerHTML is less verbose than DOM methods.

    Please point to a source to justify your statement that most people have a very unfavorable view on this method.

    It is your responsibility to die() if necessary….. - PHP Manual
    Last edited by Philip M; 07-26-2012 at 06:43 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    http://www.grauw.nl/blog/entry/475
    there are a few blogs like these which points out the weaknesses of innerhtml. I for one am a fan of innerhtml, but seeing how it's "non-standard", I just wanted to know what the "standard" was. Another question is that when using .innerHTML I can't seem to get string objects to work.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Quote Originally Posted by kduan View Post
    http://www.grauw.nl/blog/entry/475
    there are a few blogs like these which points out the weaknesses of innerhtml. I for one am a fan of innerhtml, but seeing how it's "non-standard", I just wanted to know what the "standard" was. Another question is that when using .innerHTML I can't seem to get string objects to work.
    That is one person's opinion and I do not agree with it. As a respondent says,
    "At this point, a lot of things (client-side templating, refreshing part of a page with an xmlhttprequest) can only be done in a quick and portable way by using innerHTML, so blanket statements condeming innerHTML are pointless. "

    As I say, innerHTML is far less verbose than DOM methods. The same people will whicker on about the importance of saving bytes of code.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    kduan (07-26-2012)

  • #5
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    So now that I'm continuing to use .innerHTML, how would I be able to incorporate string objects with them?

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Quote Originally Posted by kduan View Post
    So now that I'm continuing to use .innerHTML, how would I be able to incorporate string objects with them?
    Not sure that I understand you - a string object is a string.

    Code:
    <div id = "mydiv"></div>
    
    <script type = "text/javascript">
    var string = "Hello World";
    document.getElementById("mydiv").innerHTML = string;
    </script>

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by kduan View Post
    So I'm fairly new to javascript, and I've mostly been using .innerHTML to manipulate text and other HTML elements. However reading around, most people have a very unfavorable view on this method. So my question is: What do you guys use and why is it better? or Why is .innerHTML frowned upon?
    There are a few situations where innerHTML doesn't work.

    With Internet Explorer you can't use it to replace part of a table or select list. Also it doesn't update the Document Object Model in all browsers and so you can't use DOM methods to replace parts of conetent added that way.

    Also innerHTML requires that the container you are adding the content into already be part of the page.

    The only other disadvantages it has are that you need to enter < and > when supplying HTML tags as part of the innerHTML content and you can't use it to move parts of the page from one position in the page to another in a single command.

    Given the much larger amount of code that using the standard DOM methods require to achieve the same end result there is little incentive for replacing innerHTML calls except where they don't work or where the alternative results in shorter or easier to read code.

    innerHTML also has the benefit of being the simplest command for beginners to use for interacting with the web page from JavaScript without having to learn all of the DOM commands first.

    The alternatives to innerHTML will involve calls to createElement and to one or more of appendChild, insertBefore, or replaceChild.
    Last edited by felgall; 07-26-2012 at 10:04 PM.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Tags for this Thread

    Posting Permissions

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