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.

I hope you like this Post, Please feel free to comment below, your suggestion and problems if you face - we are here to solve your problems.

Arjun
I am Arjun from Hyderabad (India). I have been working as a software engineer from last 7+ years, and its my passion to learn new things and implement them as a practice. Aside from work, I likes gardening and spending time with pets.
DMCA.com Protection Status