三種動態建立元素的區別

• docment.write( )
• element.innerHTML
• docment.createElement( )

區別

1. docment.write( ) 是直接將內容寫入頁面的內容流，但是文件流執行完畢，則它會導致頁面全部重繪
2. innerHTML 是將內容寫入某個DOM節點，不會導致頁面全部重繪
3. innerHTML 建立多個元素效率更高(不要拼接字串採取陣列形式拼接)，結構稍微複雜
4. createElement() 建立多個元素效率稍低一點點，但是結構更加清晰

程式碼

1.docment.write() 建立元素

<button>點選</button>
<p>abc</p>
<div class="inner"></div>
<div class="create"></div>
<script>
  // window.onload = function() {
  //         document.write('<div>123</di
  //     }
  // 三種建立元素方式區別 
  // 1. document.write() 建立元素  如果頁面文件流載入完畢，再呼叫這句話會導致頁面重繪
   var btn = document.querySelector('button');
   btn.onclick = function() {
   document.write('<div>123</div>');
 }
 </script>
 

2.innerHTML 建立元素

<button>點選</button>
<p>abc</p>
<div class="inner"></div>
<div class="create"></div>
<script>
  	var inner = document.querySelector('.inner');
	// 拼接字串方式
	// for (var i = 0; i <= 100; i++) {
	//     inner.innerHTML += '<a href="#">百度</a>'
	// }
	var arr = [];
	for (var i = 0; i <= 100; i++) {
    	arr.push('<a href="#">百度</a>');
	}
	inner.innerHTML = arr.join('');
 </script>
 

3.document.createElement() 建立元素

<button>點選</button>
<p>abc</p>
<div class="inner"></div>
<div class="create"></div>
<script>
	var create = document.querySelector('.create');
	for (var i = 0; i <= 100; i++) {
    	var a = document.createElement('a');
    	create.appendChild(a);
	}
</script>