三種創建元素的方式：
- document.write()
- element.innerHTML
- document.createElement()
初始HTML內容：
<button>btn</button>
<p>p</p>
<div >inner</div>
<div >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="https://www.cnblogs.com/jacklzx/p/#">123</a>';
}
inner.innerHTML = arr.join('');
實作效果：
添加陣列元素方式：
實作代碼：
var inner = document.querySelector('.inner');
var arr = [];
for (var i = 0; i < 10; i++) {
arr.push('<a href="https://www.cnblogs.com/jacklzx/p/#">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);
}
實作效果：
總結：
- document.write 是直接將內容寫入頁面的內容流，但是檔案流執行完畢，則它會導致頁面全部重繪，
- innerHTML 是將內容寫入某個DOM節點，不會導致頁面全部重繪，創建多個元素，結構稍微復雜，
- createElement() 創建多個元素，結構更清晰，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/165414.html
標籤：JavaScript
上一篇：前端開發設定字體粗細