DOM innerHTML vs appendChild

There's a lot of debate on whether to use innerHTML or to add in HTML elements using DOM methods. Personally I prefer to use innerHTML because it is easier to use. innerHTML is said to be faster as well.

For comparison, I have develop 2 functions to create a table with 100 rows and 5 columns.

1) An array is use to built the Table HTML string. Then it is appended into innerHTML of a div "content".

function init(){
var ihtml = "<table id='mytable'>";
for(var i=1; i<=100; i++){
 ihtml += "<tr id='row" + i + "'>";
 for(var j=1; j<=5; j++){
  ihtml += "<td id='col" + i + "_" + j + "'>" + i +

"_" + j + "</td>";
 }
 ihtml += "</tr>";
}
ihtml += "</html>";
document.getElementById("content").innerHTML = ihtml;
}

2) A DOM table is built and append into the div "content".

function init(){
var table=document.createElement("table");
table.setAttribute("id", "mytable");
for(var i=1; i<=100; i++){
 var tr = document.createElement("tr");
 tr.setAttribute("id", "row" + i);
 for(var j=1; j<=5; j++){
  var td = document.createElement("td");
  td.setAttribute("id", "col" + i + "_" + j);
  td.appendChild(document.createTextNode(i + "_" + j))
  tr.appendChild(td);
 }
 table.appendChild(tr);
}
document.getElementById("content").appendChild(table)
}

I use Firebug profile to time the function. So what the performance result difference should I expect?

	function 1(innerHTML)	function 2
Average Time	60 ms	130 ms

Both function manage to execute in miliseconds. But, function 1 (innerHTML) is two time faster the DOM methods. I have increase it to 1000 rows and the result is the same, innerHTML is twice as fast. As a conclusion, innerHTML is much faster for more complex/larger DOM manipulation.

Show-n-Tell Thursday Add to del.icio.us