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() 创建多个元素，结构更清晰。