jQuery appending html versus appending existing element

Question

I have a string big_html and I want to add it to some div. I have observed a performance difference in the following:

$('#some-div').append( big_html );
// takes about 100 ms

//create it first
var append_objs = $(big_html);
$('#some-div').append( append_objs );
//takes about 150 ms

Does anyone know why this happens ? Thank you for your time.

EDIT: I am trying to get the stuff I am adding to the page. I have also tried

var added = $(big_html).appendTo( '#some-div' );
//150 ms

Is there an efficient way to do this ?

Pointy · Accepted Answer · 2010-07-15 13:37:21Z

4

In the second case, jQuery has the browser build a document fragment and then it stuffs the HTML in that for the browser to parse. Then, you have it manipulate the DOM again when you append that to your page.

Thus the second version is simply doing more work than the first.

I encourage you (and everybody interested) to keep the non-minified version of jQuery around for perusal. It's enlightening to just read through the code.

To "get" your content after it's added to the DOM sort-of depends on what it is. Since the content is being appended, you sort-of have to start off by remembering the last element of the target:

var last = $('#some_div > *:last');
$('#some_div').append(big_html_string);
var newStuff = last.nextAll();

If the target div might start empty, you'd need to check for that too:

var newStuff = last.length ? last.nextAll() : $('#some_div > *');

edited Jul 15, 2010 at 13:37

answered Jul 15, 2010 at 13:08

Pointy

415k62 gold badges600 silver badges632 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

nc3b Over a year ago

Thank you, that totally makes sense. Is there a way to efficiently get the elements I am adding ?

nc3b Over a year ago

Won't $('#some_div > *'); also get the preexisting elements in `#some-div' ?

Pointy Over a year ago

Oh right; sorry, you're appending to the div. I'll fix my answer.

Collectives™ on Stack Overflow

jQuery appending html versus appending existing element

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related