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>