三種建立元素的方式：

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() 建立多個元素，結構更清晰。