为什么要动态创建元素？
提高网站的性能，降低流量的使用。
第一种 document.write()
当页面加载时，会产生一个输出流，这个输出流在页面加载完毕后就关闭了。
如果在输出流关闭后执行document.write()。 document.write会开启一个新的输出流，将页面覆盖
使用建议：使用document.write只可以在页面加载过程中
灵活性不高，无法执行某个标签插入，只能一次
第二种 innerHTML
使用innerHTML动态添加某个标签内部的元素或文字.
innerHTML的问题：设置时会覆盖原先的内容
覆盖可以通过+=来解决
+=的问题:
//我们发现，使用innerHTML+=的方式添加内容时，新旧的内容中的元素已经完全不同了（尽管长得可能完全一样）可以在随便哪个标签里写
第三种 document.createElement(“标签名”) 创建元素节点
使用document.createElement创建的元素不存在与页面中
如果想要使这个标签在页面中显示，我们需要将这个标签添加到页面中某一个位置
需要结合appendChild insertBefore使用.
这种常用.
也可以
//DocumentFragment 可以看成一个标签
//作用是，当我们将这个标签放入到页面中时，放入的是这个东西的内部子节点
为了减少重排，可以先把元素放进DocumentFragment中，再把DocumentFragment放进body或者其他地儿里。只引发一次重排。
DocumentFragment 可以看成一个标签（div）
优化作用，省的添加无用标签。
document.createDocumentFragment()
var df = document.createDocumentFragment();
//使用方式跟标签一样
for (var i = 0; i < 10; i++) {
var temp = document.createElement("span");
df.appendChild(temp);
}
////将df放入到body中，只引发一次重排
document.body.appendChild(df);
经过实验发现innerHTML再重复大量次数时，性能很低。
2，我们可以间接操作
3，适应字符串先进行拼接，然后设置给innerHTML属性，提升后�使用document。creatElement+appenChild
console.time("innerHTML+str");
var str = "";
for (var i = 0; i < 500000; i++) {
str += "<div></div>";
}
box.innerHTML = str;
console.timeEnd("innerHTML+str");
这个可以计时.
innerHTML+str 随便填,上下一样就行
移除节点
父节点.removeChild(要删除的子节点)
�不知道父节点,就先给他找到,再移除.
box.parentNode.removeChild(box);
网友评论