Document fragmetn vs direct insert

by Alon Rotem

HTML

<a href="#" onclick="clearAll()">[Clear]</a><br/>
<table border="2" cellpadding="3" cellspacing="0">
    <tr>
        <td width="250px">
            <a herf="#" onclick="insertFragment()">Click to use document fragment</a>
        </td>
        <td width="200px">
            <a herf="#" onclick="insertDirect()">Click to use direct insert</a>
        </td>
    </tr>
    <tr>
        <td>
            <ul></ul>
        </td>
        <td>
            <ul></ul>
        </td>        
    </tr>
</table>

CSS

a
{
  cursor: pointer;
  color: blue;
}
a:hover
{
  color: orange;
  text-decoration: underline;
}

JavaScript

var numOfItems = 1000;

function insertFragment(){
    var ul = document.getElementsByTagName("ul")[0];
    var docfrag = document.createDocumentFragment();
    var li = document.createElement("li");
    docfrag.appendChild(li);
    
    var start = new Date().getTime();
    for(var i=0; i < numOfItems; i++)
    {
    		var newitem = docfrag.cloneNode(true);
      	newitem.firstChild.textContent = "item " + i;  
        ul.appendChild(newitem);
    }
    var end = new Date().getTime();
    alert("Inserted " + numOfItems + " using document fragment,\nCompleted in " + (end-start) + "ms");

}
function insertDirect(){
    var ul2 = document.getElementsByTagName("ul")[1];
    var start = new Date();
    for(var i=0; i < numOfItems; i++)
    {
        var li = document.createElement("li");
        li.textContent = "item " + i;
        ul2.appendChild(li);
    }
    var end = new Date();
    alert("Inserted " + numOfItems + " using direct insert,\nCompleted in " + (end-start) + "ms");
}
function clearAll(){
    var uls = document.getElementsByTagName("ul");
    for(var i=0; i < uls.length; i++)
    {
        uls[i].innerHTML = "";
    }
}