三种动态创建元素的区别


三种动态创建元素的区别

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

原创文章,作者:奋斗,如若转载,请注明出处:https://blog.ytso.com/246188.html

(0)
上一篇 2022年4月18日
下一篇 2022年4月18日

相关推荐

发表回复

登录后才能评论