Home > UI/UX Development > JavaScript > jQuery .html vs .append vs .innerHTML Difference and Performance

jQuery .html vs .append vs .innerHTML Difference and Performance

This post was most recently updated on October 3rd, 2018

This article provides the information about jQuery DOM insertion methods Difference and Performance. These methods are really matters for your page, It dramatically affects the performance of your page.

.html()

The .html() jQuery method set and return the content of selected elements. When this method is used to set content, It set the content for every matched element, any content in that element it completely replaced by new content. When this method is used to get content, It gets the only first matched element. These methods basically use JavaScript innerHTML property.

.append()

The .append() jQuery method insert content to the end of the element in matched element.

.innerHTML()

The .innerHTML() property work like .html() jQuery method. innerHTML is a JavaScript property.  The innerHTML property sets and gets the HTML content of matched element.

For that, I create a test case demo to check the performance of all insert content methods. I found jQuery methods are faster than jQuery native property.

See the jQuery .html vs .append vs .innerHTML Performance Test Case Demo

jQuery .html vs .append vs .innerHTML Performance

 If you’re wanting them to be nested mean after loop Native DOM property runs fast.

Native DOM methods are always faster than jQuery alternatives. However, .innerHTML is not ideal. jQuery seems faster compare to Native DOM methods because it prepares a string of with all the HTML first, where as the native DOM methods do one operation in each iteration. That’s why it takes time.

So winner is html() followed by .append() followed by .InnerHTML().

Hope you find it helpful. If you liked this article, then please share and comment.

This Article is TAGGED in , , . BOOKMARK THE permalink.

Chintan Upadhayay
I am a senior web developer with more than 4+ years experience in WordPress, PHP, MySQL, HTML, CSS, jQuery and other web technologies. I am the beginner in SharePoint and Learning SharePoint.

2 thoughts on “jQuery .html vs .append vs .innerHTML Difference and Performance

  1. Is there an error in the inner html example?

    shoud be

    or am I wrong here?

Leave a Reply

Your email address will not be published.

nineteen − eighteen =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">