innerHTML,createElement
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>豪情</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
<input type="button" value="test-01" onclick="test1()" /><input type="text" name="" readonly="readonly" id="t1" /><br />
<input type="button" value="test-02" onclick="test2()" /><input type="text" name="" readonly="readonly" id="t2" /><br />
<input type="button" value="清空" onclick="clearVal()" />
<div id="div1">this is div1</div>
<div id="div2">this is div2</div>
<script type="text/javascript">
var d = new Date().getTime(), buf = [],
div1 = document.getElementById('div1'),
div2 = document.getElementById('div2'),
t1 = document.getElementById('t1'),
t2 = document.getElementById('t2');
function test1(){
for(var i=0; i<1000; i++){
buf.push('<div><a href="#">测试');
buf.push(i);
buf.push('</a></div>');
}
div1.innerHTML = buf.join('');
t1.value = '耗时：' + (new Date().getTime() - d) + ' 毫秒';
}
function test2(){
for(var i=0; i<1000; i++){
var a = document.createElement('a');
var div = document.createElement('div');
a.href = '#';
a.innerHTML = '测试';
div.appendChild(a);
div2.appendChild(div);
}
t2.value = '耗时：' + (new Date().getTime() - d) + ' 毫秒';
}
function clearVal(){
div1.innerHTML = '';
div2.innerHTML = '';
t1.value = '';
t2.value = '';
}
</script>
</body>
</html>
