javascript_文档碎片

来源：互联网发布：软件测试过程视频编辑：程序博客网时间：2024/05/22 03:08
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html xmlns="http://www.w3.org/1999/xhtml">    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        <title>文档碎片</title>        <script type="text/javascript">            window.onload = function() {                var oBtnCreateElement = document.getElementById("btnCreateElement");                var oBtnCreateDocumentFragment = document.getElementById("btnCreateDocumentFragment");                var oUl1 = document.getElementById("ul1");                var oUl2 = document.getElementById("ul2");                oBtnCreateElement.onclick = function() {                    var date = new Date().getTime();                    for (var i = 0; i < 1000; i++) {                        var oLi = document.createElement("li");                        oLi.innerHTML = "haha";                        if (oUl1.children.length == 0) {                            oUl1.appendChild(oLi);                        } else {                            var oSubLi = oUl1.getElementsByTagName("li");                            oUl1.insertBefore(oLi, oSubLi[0]);                        };                    }                    alert(new Date().getTime()-date);                };                oBtnCreateDocumentFragment.onclick = function() {                    var date = new Date().getTime();                    var oTemp = document.createDocumentFragment();                    //创建文档碎片                    for (var i = 0; i < 1000; i++) {//把节点都存放到文档碎片中                        var oLi = document.createElement("li");                        oLi.innerHTML = "通过文档碎片创建节点";                        oTemp.appendChild(oLi);                    }                    if (oUl2.children.length == 0) {                        oUl2.appendChild(oTemp);                    } else {                        var oSubLi = oUl2.getElementsByTagName("li");                        oUl2.insertBefore(oTemp, oSubLi[0]);                    };                    alert(new Date().getTime()-date);                };            };        </script>    </head>    <body>        <input type="button" id="btnCreateElement" value="btnCreateElement"/>        <ul id="ul1">        </ul>        <input type="button" id="btnCreateDocumentFragment" value="btnCreateDocumentFragment" />        <ul id="ul2">        </ul>    </body></html>
0 0