Test Both Strings and DOM

Browsers Targeted: Internet Explorer 3+

It used to be a truism that manipulating strings was always much slower in DHTML than working directly with the Document Object Model (DOM), but with newer versions of the browser that may no longer be the case. The Internet Explorer 5.0 string manipulation capability is incredibly fast—when building a table of a thousand rows, for example, it took between twenty and thirty seconds to create when working with the DOM, but barely three seconds when a string buffer was created that contained the text HTML. For older versions of the browser the opposite was generally true; string buffering was much slower. So if you can determine your target platform may want to include both ways of building tables. (Note that string manipulation is almost certainly a beneficiary of research done with XSL).

 
<script language="JavaScript">
	var startTime=0
	var endTime=0
	function drawStringBasedTable(id){
		startTime=new Date();
	    var el=document.all(id)
		buf="<table>";
		buf+="<tr><th>Number</th><th>Square</th><th>Square Root/th></tr>";
		for (var index=1;index!=1001;index++){
			buf+="<tr>"
			buf+="<th>"+index+"</th>"
			buf+="<th>"+index*index+"</th>"
			buf+="<th>"+Math.sqrt(index)+"</th>"
			buf+="</tr>"
			}
		buf+="</table>"
		el.innerHTML=buf;
		endTime=new Date();
		timeTaken=(endTime-startTime)/1000;
	end function
</script>

 
<script language="JavaScript">
	function drawDOMBasedTable(id){
		startTime=new Date();
	    var el=document.all(id);
		tbl=document.createElement("TABLE");
		var row=tbl.insertRow();
		cell=row.insertCell();
		cell.innerText="Number";
		cell=row.insertCell();
		cell.innerText="Square";
		cell=row.insertCell();
		cell.innerText="Square Root";
		for (var index=1;index!=1001;index++){
			var row=tbl.insertRow();
			cell=row.insertCell();
			cell.innerHTML=index;
			cell=row.insertCell();
			cell.innerHTML=index*index
			cell=row.insertCell();
			cell.innerHTML=Math.sqrt(index);
			}
			el.appendChild(tbl);
		endTime=new Date();
		timeTaken.innerText=(endTime-startTime)/1000;
		} 
</script>

 
<button onclick="drawStringBasedTable('mathTable')">Draw String Based Table</button>

 
<button onclick="mathTable.innerHTML=''">Clear Table</button>
<div>Time Taken=<span id="timeTaken">0</span>s</div>

 
<button onclick="drawDOMBasedTable('mathTable')">Draw DOM Based Table</button>

 
<div id="mathTable">Math Table</div>