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);//添加到页面
}
}