JS学习--利用javascript创建元素的4种方法

Posted 2021-07-25 庸人冲

文章目录

• • 先总结4种方法
  • • 1. document.write()；
    • 2. element.innerHTML
    • 3. document.creatElment()
    • 4. 采用数组创建的方式
  • 遇到的问题

这个知识点学习也有几天了，今天在做轮播图效果时被坑了一下耽误了很长时间，所以从重新在总结巩固一下。

先总结4种方法

1. document.write()；

var btn = document.querySelector('button');
        btn.onclick = function () {
            document.write('<div>456</div>');
        }

这种方法会使导致页面重绘，也就是重新创建了一个新的页面里面只有这个div盒子，如下图：

因此不推荐使用这种方式来创建元素。

2. element.innerhtml

var inner = document.querySelector('.inner');
inner.innerHTML = "<a href='#'>百度</a>";

这种方法是将标签最为内容添加到父盒子里，但因为字符串的不可变性，每次创建都需要在内存中开辟一个新空间，当有大量标签需要创建时，效率非常低，我这边创建10000个网页直接打不开，因此也不推荐。

3. document.creatElment()

 var creat = document.querySelector('.creat');
 var a = document.createElement('a');
 creat.appendChild(a);

这种方法是比较常用的创建元素方法，不需要拼接字符串效率也更高，不过需要使用Node.appendChild 或者 Node.insertBefore将创建的元素追加至子元素末尾，或者指定元素的前面。

4. 采用数组创建的方式

var inner = document.querySelector('.inner'); 
var arr = [];
// 用for循环将元素重复添加至数组
 for (var i = 0; i < 10000; i++) {
            // arr.push 追加至数组尾部
            arr.push("<a href='#'>123</a>")
        }
// 利用arr.join 将数组转换为字符串格式
inner.innerHTML = arr.join('');

这种方式属于element.innerHTML的优化版，利用了数组的特性，不需要每次创建元素都向内存申请一块空间，在大量创建元素时效率最高。不过步骤相对麻烦。

遇到的问题

今天利用方法4，创建轮播图的圆点按钮时，发现无法给按钮绑定点击事件，折腾了很久都没想出解决方法，后来咨询了一位大佬，一下就点中问题所在，不得不说大佬就是大佬，请收下我的膝盖。

大概的结构如下

<div class="focus">
        <a href="javascript:;" class="prev"></a>
        <a href="javascript:;" class="next"></a>
        <ul>
            <li><a href="javascript:;"><img src="upload/focus.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="upload/focus1.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="upload/focus2.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="upload/focus3.jpg" alt=""></a></li>
        </ul>
        <ol class="btn">
        </ol>
    </div>

     // js这里只截取了出问题的地方
     // 1. 获取必要元素
	let ul = document.querySelector('ul');
	let ol = document.querySelector('.btn');
	let arr = [];
     // 2.使用数组创建元素
	for (let i = 0; i < ul.children.length; i++) {
		arr.push('<li></li>')
		ol.innerHTML = arr.join('');
		// 3. 给圆点按钮绑定点击事件
		ol.children[i].addEventListener('click', function () {
			for (let i = 0; i < ol.children.length; i++) {
				ol.children[i].className = '';
                }
			this.className = 'current';
            })
        }

	

问题就在for循环里面，我通过数组方式创建元素，可以成功的将元素创建，但是却无法将 ol.children[i] 绑定点击事件，只有最后一个按钮被绑定了点击事件，而我使用方法3创建元素却能正常绑定。

在咨询了大佬后，告诉我上面第9行的 ol.innerHTML = arr.join(’’);在每次循环后都会将原来的标签全部替换掉，因此在最后一次循环时，只给最后一个元素绑定了点击事件，大佬这么一说我就悟了，真是大佬一席话，少掉一地头发。

而解决方法也很简单，如过使用数组来创建元素并绑定点击事件，就得把ol.innerHTML = arr.join(); 和下面的点击事件写在for循环外面， 而再用一个for循环嵌套点击事件就可以了。

     // js这里只截取了出问题的地方
     // 1. 获取必要元素
	var ul = document.querySelector('ul');
	var ol = document.querySelector('.btn');
	var arr = [];
     // 2.使用数组创建元素
	for (var i = 0; i < ul.children.length; i++) {
		arr.push('<li></li>')
        }
     // ol.innerHTML = arr.join('');要写在for循环外面，如果写在for循环里面，等于每追加一个新愿元素就将innerHTML的所有内容重新替换掉，效率会降低。
	ol.innerHTML = arr.join('');
	// 3. 给圆点按钮绑定点击事件
	for(var i = 0;i < ol.children.length;i++ ){
     ol.children[i].addEventListener('click', function () {
			for (let i = 0; i < ol.children.length; i++) {
				ol.children[i].className = '';
		}
         this.className = 'current';
	})
}
         

这样创建的每个li就绑定了点击事件。