Dom动态加载

Dom动态加载，就是在一个页面上通过js动态的的创建Dom节点，添加到本页面。

        有两种方法createDocumentFragment和createElement,网上的说法是createDocumentFragment的效率会高些。我一般是两种混着用，用createDocumentFragment创建一个父节点，然后用createElement创建子节点，按顺序加到父节点。最后加载到页面的响应节点下。

        下面还是要说说CreateDocumentFragment和createElement的具体详细区别。（这也是我在网上找的http://www.cnblogs.com/xesam/archive/2011/12/19/2293876.html）

第一：createElement创建的元素可以使用innerHTML，createDocumentFragment创建的元素使用innerHTML并不能达到预期修改文档内容的效果，只是作为一个属性而已。两者的节点类型完全不同，并且createDocumentFragment创建的元素在文档中没有对应的标记，因此在页面上只能用js中访问到。

第二：另一个最主要的区别就是createElement创建的元素可以重复操作，添加之后就算从文档里面移除依旧归文档所有，可以继续操作，但是createDocumentFragment创建的元素是一次性的，添加之后再就不能操作了（说明：这里的添加并不是添加了新创建的片段，因为上面说过，新创建的片段在文档内是没有对应的标签的，这里添加的是片段的所有子节点）。

下面是我的项目的部分代码用的就是Dom动态加载

//增加视频框    function addVideo(num)    {      for(var i=0; i<num; i++)      {        var frag = document.createDocumentFragment();        var div = document.createElement('div');        div.setAttribute('class','controls video-input li-hidden');//设置属性，如id，class，type，name，style        var label1 = document.createElement('label');        label1.innerHTML="视频地址"+(i+video_input+1)+":";//增加文字        label1.setAttribute('class','li-label')        var input1 = document.createElement('input');        input1.setAttribute('class','li-input');        input1.setAttribute('type','text');        input1.setAttribute('name','link[]');              div.appendChild(label1);//添加到frag        div.appendChild(input1);                frag.appendChild(div);        $('.video-input').last().after(frag);//添加到页面      }    }