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 10 of 10
  1. #1
    Regular Coder Krupski's Avatar
    Join Date
    Dec 2010
    Location
    United States of America
    Posts
    505
    Thanks
    39
    Thanked 47 Times in 46 Posts

    Difference between Insert and innerHTML?

    Hi all,

    I use JS to dynamically generate HTML such as a <select> dropdown menu. I do it by placing an empty element where I want the dropdown to appear (i.e. <span id="dropdown"></span>) then getElementById('dropdown') and insert the HTML with innerHTML = html.

    But I could also do it by getting the empty element and then doing an "insertBefore" or "appendChild" call.

    Is one "preferred" over the other? Is one "better" than the other?

    Thanks.

    -- Roger
    "Anything that is complex is not useful and anything that is useful is simple. This has been my whole life's motto." -- Mikhail T. Kalashnikov

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    It is always preferred to use insertBefore or appendChild.

    The browser has to build the DOM structure from the HTML anyway, so if you tell the browser exactly how the structure will look like, it will always be faster than innerHTML.

    Performance test: http://jsperf.com/appendchild-vs-innerhtml2

  • Users who have thanked devnull69 for this post:

    Krupski (01-20-2012)

  • #3
    Regular Coder Krupski's Avatar
    Join Date
    Dec 2010
    Location
    United States of America
    Posts
    505
    Thanks
    39
    Thanked 47 Times in 46 Posts
    Quote Originally Posted by devnull69 View Post
    It is always preferred to use insertBefore or appendChild.

    The browser has to build the DOM structure from the HTML anyway, so if you tell the browser exactly how the structure will look like, it will always be faster than innerHTML.

    Performance test: http://jsperf.com/appendchild-vs-innerhtml2
    Wow... I ran that test - what a difference!

    BTW, did you just make up that test? The site says it was written 3 hours ago.

    Thanks very much!

    -- Roger
    "Anything that is complex is not useful and anything that is useful is simple. This has been my whole life's motto." -- Mikhail T. Kalashnikov

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    yes I did :-)

  • #5
    mjy
    mjy is offline
    New Coder
    Join Date
    Jan 2012
    Location
    United States
    Posts
    28
    Thanks
    0
    Thanked 6 Times in 6 Posts
    Another general reason to use insertBefore or appendChild rather than innerHTML, is that innerHTML is a non-standard property. Although it's supported by all modern browsers, there are differences and quirks in its implementation (for example, markup containing & characters can cause all sorts of trouble, or the markup might get displayed in the browser but not added to the DOM).

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Here are some situations where you can NOT use innerHTML.

    - You can't use innerHTML to update a part of a table - Internet Explorer will only allow the entire table to replaced or a single cell's content.

    - You can't use innerHTML to add script tags to the page as the script tag will be added but the script will not load and will never run.

    - You can't use innerHTML if you are adding something you want to be able to update later from JavaScript - eg in there is an id on a tag within the content to be added then you will not be able to use getElementById to reference that id and update its content - you would have to replace the entire content of the innerHTML.

    Basically, innerHTML updates the visual appearance of the page without updating the interface that JavaScript uses to access the page whereas insertBefore and appendChild update the interface and the visual appearance changes as a result of the change to the interface.
    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.

  • #7
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts

    - You can't use innerHTML to update a part of a table - Internet Explorer will only allow the entire table to replaced or a single cell's content.

    - You can't use innerHTML to add script tags to the page as the script tag will be added but the script will not load and will never run.

    - You can't use innerHTML if you are adding something you want to be able to update later from JavaScript - eg in there is an id on a tag within the content to be added then you will not be able to use getElementById to reference that id and update its content - you would have to replace the entire content of the innerHTML.

    Basically, innerHTML updates the visual appearance of the page without updating the interface that JavaScript uses to access the page whereas insertBefore and appendChild update the interface and the visual appearance changes as a result of the change to the interface.
    I agree with the first two, but the last two sentences prove to be wrong

    e.g. you can do this
    Code:
    document.body.innerHTML += '<div id="mytest">Test</div>';
    document.getElementById("mytest").innerHTML = "My Test";
    alert(document.getElementById("mytest").innerHTML);  // will give you "My Test"

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by devnull69 View Post
    I agree with the first two, but the last two sentences prove to be wrong

    e.g. you can do this
    Code:
    document.body.innerHTML += '<div id="mytest">Test</div>';
    document.getElementById("mytest").innerHTML = "My Test";
    alert(document.getElementById("mytest").innerHTML);  // will give you "My Test"
    In some browsers. If you were to test in all the popular browsers you will find at least one where that doesn't work. I know because I actually wrote code like that for a script once and then found that it broke in a browser I'd forgotten to include in the test. Someone using that browser was very quick to tell me about it.

    I was attempting to actually change the content of that innerHTML in the code I had in that script so possibly you can still read the content using innerHTML but can't update it.
    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.

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by felgall View Post
    In some browsers. If you were to test in all the popular browsers you will find at least one where that doesn't work. I know because I actually wrote code like that for a script once and then found that it broke in a browser I'd forgotten to include in the test. Someone using that browser was very quick to tell me about it.

    I was attempting to actually change the content of that innerHTML in the code I had in that script so possibly you can still read the content using innerHTML but can't update it.
    I have to say that this seems to work in IE9 and all modern (popular) browsers.

    Code:
    <script type = "text/javascript">
    
    document.body.innerHTML += '<div id="mytest">Test</div>';
    document.getElementById("mytest").innerHTML = "My Test";
    alert(document.getElementById("mytest").innerHTML);  // will give you "My Test"
    document.getElementById("mytest").innerHTML = document.getElementById("mytest").innerHTML.replace(/My/,"Your")
    alert(document.getElementById("mytest").innerHTML);  // will give you "Your Test"
    document.getElementById("mytest").innerHTML = document.getElementById("mytest").innerHTML + " works OK";
    alert(document.getElementById("mytest").innerHTML);  // will give you "Your Test works OK"
    
    </script>
    I tried devnull69's link and it crashed my browser (IE9)
    Last edited by Philip M; 01-22-2012 at 09:41 AM.

    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.

  • #10
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Philip M View Post
    I have to say that this seems to work in IE9 and all modern (popular) browsers.
    I can't remember which browser it was that couldn't handle it. It was about three or four years ago.
    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.


  •  

    Posting Permissions

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