Better way of using jquery’s Append

We use append() method for adding elements dynamically into an already existing element. If you miss use this function, it will dramatically affects the performance of your page.

In this post, I will share a quick performance tip and will show correct way of using jQuery.append().

jQuery.append() inserts content at the end of the each matched element.Here is the basic example, it will append the content into div element

If you’re appending very less elements to the DOM there is no problem, but If you’re appending a lot of elements to the DOM one by one, instead of appending all elements at a time, than there will be performance smash. Let test it, open you console and run following examples( Assuming that JQuery is available on the console)

Bad way of using –

Good way of using-

If you observe the time differences of above examples, there is an huge performance improvement with second approach.

Categorized as JQuery

By Arjun

I am Arjun from Hyderabad (India). I have been working as a software engineer from the last 7+ years, and it is my passion to learn new things and implement them as a practice. Aside from work, I like gardening and spending time with pets.

0 0 vote
Article Rating
Notify of
Inline Feedbacks
View all comments