zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    生成函数trick
    带权并查集维护二分图
    关于二项式反演的一些思考
    CSP集训记录
    解决Maven版本冲突
    蚂蚁金服5轮面试,最后栽这了...
    配置交换机Eth-Trunk+VRRP+MSTP+接口BFD状态联动+Telnet示例
    企业园区网络建设技术方案(华为)
    网络三层架构
    SOA治理
  • 原文地址:https://www.cnblogs.com/milk/p/2445734.html
Copyright © 2011-2022 走看看