Add large chunk of HTML with Jquery

Question

Hi. 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

Using append is fine, but I would look to use it just once, or as little as you can, and construct the HTML in advance, holding it in a string variable.

In general, very little DOM manipulation should really be undertaken. You should be hitting the DOM in this way only when is absolutely necessary. Let us examine the following example:

var $myList = $("#myList");   

for (i=0; i<1000; i++){
    $myList.append("This is list item " + i);
}

This code adds 1000 lines to an HTML list. This is done with 1000 successive calls to the .append() method, and hence, 1000 manipulations to the DOM. The following code, modified from the example above demonstrates how this can be made more efficient:

var $myList = $("#myList");
var li = "";   

for (i=0; i<1000; i++){
    li += "<li>This is list item " + i + "</li>";
}  

$myList.append(li);

See the following article: http://www.jameswiseman.com/blog/2010/04/20/jquery-standards-2-dom-manipulation/

Answer 2

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)

Answer 3

I would use the native innerHTML for the entire chunk, this is proven to be the fastest way to do DOM manipulations. See f.ex here: http://www.quirksmode.org/dom/innerhtml.html

<div id="container"></div>

<script>
var html = '<p>Some HTML</p>';
document.getElementById('container').innerHTML = html;
</script>