CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Bora
Bora

Reputation: 1925

Speeding up appending HTML elements into div via JavaScript

I am appending some elements in my div as a list view. All the details of my items are stored in an array. The appending is taking very less time when items are less around 50. However when items size increase to 400 or more the it took lot of time in appending my list.

How i can append div little faster or on fly to my div.

The structure is something like this.

<div id="main">
<div id="item"></div>
.....
.
.

.
.
<div id="item"></div>

</div>

This main div is as a different screen in my app.

Upvotes: 1

Views: 2153

Answers (5)

arete
arete

Reputation: 1933

Document fragments will give you a large increase in performance for the problem you're having. What you can do is create a document fragment for which all of your elements will be appended to and in turn append the document fragment to the element you plan on appending everything to.

The way to do this is to create a jquery object such as the following:

var foo = $("<div>");
foo.append($("<div id = "item"></div>"));
foo.append($("<div id = "item"></div>"));
...
foo.append($("<div id = "item"></div>"));
$("body").append(foo);

You can also alternatively use .html() to set the inner html of an element. See: John Resig's DOM DocumentFragments article for more.

Upvotes: 1

Hashem Qolami
Hashem Qolami

Reputation: 99544

As @arete has mentioned, DocumentFragment will increase the performance of appending elements into the DOM.

Using DocumentFragments is faster than repeated single DOM node injection and allows you to perform DOM node operations on new elements instead of mass-injection via innerHTML.

The DocumentFragment interface represents a minimal document object that has no parent. It is used as a light-weight version of Document to store well-formed or potentially non-well-formed fragments of XML.
- MDN

We can create an empty DocumentFragment, using document.createDocumentFragment() method, and append the created children by .appendChild() JavaScript native method, as follows:

var frag = document.createDocumentFragment(),
    limit = 400,
    element = 'div',
    clsName = 'item';

for (var i=0; i<limit; i++) {
    var box = document.createElement(element);
    box.className = clsName;
    // Append the child into the Fragment
    frag.appendChild(box);
}

// Finally, append the fragment into the real DOM (touch the DOM just once)
document.getElementById('main').appendChild(frag.cloneNode(true));

WORKING DEMO.

Here is a performance test of using DocumentFragments on jsPerf

Also, I updated the fiddle demo which is provided by @Zword, you might want to consider.

Upvotes: 3

Kunj
Kunj

Reputation: 2018

Always use caching for this as appending an element in DOM slows the process. Better, collect markups in a string, then append all in DOM at once. E.g:

var _sEleList = ""
for (var k=0; k < _nElements; k++) {
    _sEleList += "<div id="+ m_sPrefix+ k + " class='w_cClass'>Content</div>";
};
$('#w_oHolder').append(_sEleList);

Upvotes: 0

Zword
Zword

Reputation: 6787

Try this simple plugin I made.Will surely be faster than appending items or divs one-by-one:

/*plugin code start*/
(function( $ ) {
$.fn.fastAppend = function(getHTML,limit){
var parent=$(this);
var str = "";
for(i=0;i<limit;i++)
{
    str = str + getHTML + "\n";
}
parent.append(str);
};}( jQuery ));
/*plugin code end*/

/*Call Plugin*/
$('#main').fastAppend('<div class = "item"></div>',400);

See Demo

Check the execution time taken when

Case 1: When divs are appended one-by-one

Fiddle 1

Case 2: When divs are concatenated in a string and appended altogether

Fiddle 2

Result : Case 2 is faster than Case1

Upvotes: 3

6502
6502

Reputation: 114569

Building a string with all the content and then using container.innerHTML = str is a low-tech and ugly approach, but may be is faster.

Upvotes: 0

Related Questions