JavaScript DOM三种创建元素的方式

三种创建元素的方式：

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

初始HTML内容：

<button>btn</button> <p>p</p> <div class="inner">inner</div> <div class="create">create</div> 

预览：

1. document.write()

实现代码：

var btn = document.querySelector('button'); btn.onclick = function() {     document.write('<div>123</div>'); } 

实现效果：
点击“btn”按钮之后：

使用document.write()创建元素，如果页面文档流加载完毕，再调用事件会导致页面重绘

2. element.innerHTML

字符串拼接方式：
实现代码：

var inner = document.querySelector('.inner'); for (var i = 0; i < 10; i++) {     inner.innerHTML += '<a href="#">123</a>'; } inner.innerHTML = arr.join(''); 

实现效果：

添加数组元素方式：
实现代码：

var inner = document.querySelector('.inner'); var arr = []; for (var i = 0; i < 10; i++) {     arr.push('<a href="#">123</a>'); } inner.innerHTML = arr.join(''); 

实现效果：

3. document.createElement()

实现代码：

var create = document.querySelector('.create'); for (var i = 0; i < 10; i++) {     var a = document.createElement('a');     create.appendChild(a); } 

实现效果：

总结：

1. document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘。
2. innerHTML 是将内容写入某个DOM节点，不会导致页面全部重绘。创建多个元素，结构稍微复杂。
3. createElement() 创建多个元素，结构更清晰。