jquery append empty divs vs. html markup

[fishnfrogs]

As I dive further into this project I’m working on, I realize that I have a lot of necessary but empty div’s. The sample markup looks like:

For this project, I have a ‘cover’ on the page that goes away when the page is fully loaded. Are there any benefits to using jquery to append the empty divs and leave the markup lighter. So instead the markup and js would look like:

That way the HTML stays lightweight, but I’m not sure if this would add to the load time of images etc. Does anyone have any thoughts? Thanks!

[Skeater]

You want to minimize the amount of appending you do. If you use append() you’re better off making a single string with both DIVs in it and appending that in one go.

var emptyArray = ;

var len = emptyArray.length;

var strDivs = '';

for(i=0i
strDivs = strDivs + '
';

}

$('container').append(strDivs);

What’s even faster than that is making an array and using the native javascript .join() method to turn that array into a string after the loop.

In terms of using html() vs append(), it depends on your project really. Your markup and images should load before any jquery runs as you should wrap it in $(document).ready(function() {}); anyway.

If you know you’re definately going to populate all the DIVs, I’d put them in the markup and use html() later.
Unless you’re talking thousands of them… in which case I’d let JS do it on the client to keep page load speeds down.

Try both ways and do some speed tests.

[Author]

Posts