三种动态创建元素的方法，使用场景，以及局限性（js）

 

1.document.write（）会把之前的整个页面覆盖掉（几乎不用），不能在触发事件时使用

在网站接入在线客服的场景（第三方）被用到：

2.element.innerHTML;  每使用一次innerHTML ，页面都需要重新绘制 ，使用时考虑效率问题

优化一，提前拼接字符串，一次使用inner HTML

问题来了：因为字符串的“不可变”，每次拼接都需要重新开辟内存空间，需要耗费时间。

优化二，使用数组代替字符串拼接，

因为数组是一个对象，每次拼接只需要已开辟空间内添加，比重新开辟空间内存要省时间。

两个需要用到的方法：

array.push（）往数组里面添加

array.join（）拼接数组中的每一项，默认使用‘ ，’隔开 

array.join（' '）即可完成拼接

3.createElement 在内存中创建一个DOM对象

创建后 ，需要把该元素放到DOM树上 使用 element.appendChild（）；

下面附一个案例：动态创建列表，鼠标放上高亮