三種創建元素的方式:
- document.write()
- element.innerHTML
- 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);
}
實現效果:
總結:
- document.write 是直接將內容寫入頁面的內容流,但是文檔流執行完畢,則它會導致頁面全部重繪。
- innerHTML 是將內容寫入某個DOM節點,不會導致頁面全部重繪。創建多個元素,結構稍微復雜。
- createElement() 創建多個元素,結構更清晰。