javascript_文档碎片

最新推荐文章于 2021-10-29 16:34:17 发布

zhanyan_x

最新推荐文章于 2021-10-29 16:34:17 发布

阅读量363

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/zhanyan_x/article/details/40783983

版权

javascript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!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>

zhanyan_x

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript_文档碎片

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> 文档碎片 window.onload = function() { var
复制链接

扫一扫