标签：元素 innerHTML write 三种 动态创建 var document docment

三种动态创建元素的区别

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

标签：元素,innerHTML,write,三种,动态创建,var,document,docment
来源： https://www.cnblogs.com/Eamon-18/p/16163019.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。