Question

I am designing a site that uses progressive enhancement and has also has a mobile version. I am wanting to use jquery to add a slideshow to the desktop site and want to know the best method for adding a large quantity of HTML. A sample of what I intend to add is:

<!-- Slideshow -->
<div class="scrollable">
<!-- "previous page" action -->
<a class="prev browse left"></a>   

<!-- root element for the items -->
<ul>
    <li>
        <img src="images/slideshow/image1.jpg" alt="image 1" title="image 1" />
    </li>

    <li>
        <img src="images/slideshow/image2.jpg" alt="image 2" title="image 2" />
    </li>

    <li>
        <img src="images/slideshow/image3.jpg" alt="image 3" title="image 3" />
    </li>

    <li>
        <img src="images/slideshow/image4.jpg" alt="image 4" title="image 4" />
    </li>

    <li>
        <img src="images/slideshow/image5.jpg" alt="image 5" title="image 5" />
    </li>
</ul>

<!-- "next page" action -->
<a class="next browse right"></a>

Would I be better using the append or HTML method for something like this. I also had another idea that I might create a variable with the HTML inside and use JQuery to add the contents but I have tried and failed on that one (lack of sufficient knowledge!). I would appreciate any advice.

Answer 1

You can do benchmarks for any kind of comparisons, like this:

function test( name, fn, n, next ) {

  var n = n || 100; // default number of runs
  var start, end, elapsed;

  setTimeout(function() { 
    start = Number(new Date());   
    for ( ; n--; ) {
      fn() 
    }
    end = Number(new Date());

    elapsed = end - start;

    // LOG THE RESULT
    // can be: $("#debug").html(name + ": " +  elapsed + " ms");
    console.log(name + ": " +  elapsed + " ms")); 

    next && next();
  }, 0);
}

test("append", function() {
  $("#elem").append( LARGE HTML );
});

test("html", function() {
  $("#elem").html( LARGE HTML );
});

What I would try is create a new element and set it’s html to the big chunk, and then append this element to the dom. It will be faster in my opinion, because when applying the html the element is not visible so the browser can work faster, and then it needs to append only one element to the DOM.

See it in action. (click preview)

(it seems that html() is faster)