三种动态创建元素的区别

1. document.createElement()
2. document.write()
3. innerHTML

首先 write

document.write('写入的内容');
复制代码

调用这个方法之后，整个页面的内容将会被替换为写入的内容，所以这个方法只能在页面加载完成之前调用，否则会导致页面内容丢失。

也就是说，如果此方法在页面加载完成之后调用，会导致整个页面只剩下write方法里面的内容。

其次 createElement

var div = document.createElement('div');
div.innerHTML = '写入的内容';
document.body.appendChild(div);
复制代码

这个方法是动态创建一个元素，然后将这个元素添加到页面中。

相当于在页面中床架一个文本节点，然后通过appendChild方法将这个文本节点添加到页面中。这个方法不会导致页面的重绘，也就不会出现write的问题。

最后 innerHTML

element.innerHTML = '写入的内容';
复制代码

这个方法是直接将所选元素的内容替换为写入的内容，所以这个方法也不会导致页面的重绘。但是如果所选节点为body，那么也会导致页面的重绘。