关于documentFrgament 文档片段的简单理解

documentFragment 即文档片段，也可以理解为是一个暂时储存数据的仓库。

好处： 可以将多行代码一次性的放到文档中，减少页面的渲染次数，用于提高

创建时的性能问题。使用不多，可做了解

 

使用需要三个步骤

1.创建一个文档片段

2.将元素追加到这个文档片段中

3.将文档片段追加到页面中  

 

不过也有缺点：不支持innerHTML属性  

解决方法：对于简单结构，直接追加，没有任何问题

                  对于复杂结构，先用html的结构创建好，再放到代码片段中

简单结构

 var df = document.createDocumentFragment();
        
        // 创建简单结构：例如10个div
         for (var i = 0; i < 10; i++) {
            var div = document.createElement('div');
            div.innerText = '这是div';
            // 将需要创建的元素添加到df中
            df.appendChild(div);
        } 

复杂结构

// 创建复杂结构: 例如 ul>li*5 设置不同内容 ol>li*5 不同内容
        var ul = document.createElement('ul');
        ul.innerHTML =
            '<li title="abc"><a href="xx18.html">内容111</a></li>\
        <li class="hehe"><a href="xx21.html">内容266</a></li>\
        <li class="hehe"><a href="xx23.html">内容312</a></li>\
        <li title="abc"><a href="xx44.html">内容14</a></li>\
        <li><a href="xx12.html">内容52</a></li>';

        var ol = document.createElement('ol');
        ol.innerHTML =
            '<li title="abc"><a href="xx128.html">内容1211</a></li>\
        <li class="hehe"><a href="xx221.html">内容2626</a></li>\
        <li class="hehe"><a href="xx23.html">内容3122</a></li>\
        <li title="abc"><a href="xx44.html">内容124</a></li>\
        <li><a href="xx12.html">内22容52</a></li>';

        df.appendChild(ul);
        df.appendChild(ol);

        // 将df设置到页面中显示
        document.body.appendChild(df);