三种动态创建元素的区别

三种动态创建元素的区别

• 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>