动态添加元素

节点

梗概:

有三种方法

法一: 创建元素再插入到标签中(常用，并且不容易出bug)

child::

创建元素再插入到标签中

标签 节点 创建-新建-创造

适用范围:

1. 与其他方法的比较:

1. 比用innerText写入标签慢
2. 比较正式，更稳定，不容易出bug

批量插入

• use::documentFragment

创建元素:

存放运算的变量 = document.createElement('标签名')

插入元素:

1. 追加到最后的子标签:

父标签.appendChild(待插入元素)

2. 插入到指定子元素的前面:

父标签.insertBefore(待插入元素, 指定元素)

指向原始笔记的链接

法二: 将标签字符串写入到标签内

child::

将标签字符串写入到标签内

元素 节点

适用范围:

1. 横向比较:

1. 比创建元素再插入到标签中快
   1. 前提是使用数组拼接成字符串, 然后再插入
2. 比较容易出bug

梗概:

html中父标签的子标签都以字符串形式被夹在父标签的头和尾中 故使用innerHTML可以获取/修改子标签

推荐方法:

1. 举例说明:

var arr = [];
for (var i=0;i<100;++i){
	arr.push('<div>cao</div>');
}
父元素.innerHTML= arr.join('');//将数组元素按指定分隔符拼接成一个字符串

这样效率非常高

不推荐方法:

1. 举例说明:

for(var i=0;i<100;++i){
	父元素.innerHTML += '<div>艹</div>';
}

这样innerHTML的效率优势就体现不出来, 还不如用createElement()

指向原始笔记的链接

法三: 把标签写入页面文档流(效率最高)

child::

把标签写入页面文档流

元素 节点

梗概:

浏览器渲染html页面的时候, html是以文本流形式加载的 该方法可以把指定字符串写入html的body标签内的文本流中

举例说明:

document.write('<div>123<div>) 会在body标签下添加一行div标签

1. 说明:

1. 如果html已经被加载完成了, 再去write, 则会导致重绘整个页面(即写入到一个新的, 空白的html页面上, 然后该页面覆盖了原html页面)
   1. 如通过按钮写入就会导致重绘, 因为点击按钮发生在加载完成之后

指向原始笔记的链接