JQuery中append和JS中appendChild添加重复元素问题

文章目录

现象
解决问题

现象

在我们想要使用append在元素中追加子元素时，我们会创建一个dom元素，然后去循环append插入到父元素中，可是我们发现我们最终的效果只有一个元素

HTML:

<body>
	<div class="content"></div>
</body>

JS:

var span = document.createElement('span');
span.innerText = "你好";
for(var i = 0; i < 10; i++){
    
    
	document.getElementsByClassName('content')[0].appendChild(span);
}

或者我们使用JQuery的方法:

var span = $('<span>你好</span>');
for(var i = 0; i < 10; i++){
    
    
	$('.content').append(span);
}

此时我们的预期效果是：
在这里插入图片描述

可现实是：

那这到底是为什么呢？我们不就是重复添加一个元素到一个父元素内吗？逻辑和代码都没有问题啊。的确逻辑和代码都没有问题，问题出现在不了解浏览器dom元素是什么

解决问题

浏览器中每一个dom元素都是一个对象
在这里插入图片描述
console.dir可以将元素以对象的形式打印

所有的追加元素方法都会去判断这个父元素里面是否拥有这个元素对象，如果拥有则以为已经添加完成，如果没有则添加进去，这也就是为什么我们只添加了一个元素的原因

那么我们应该怎么做才可以达到我们的预期效果呢？

我们都知道每一个新的对象他们的地址都是不一样的，对象是引用类的值每次比较比的就是地址，地址不一样不就说明我这个元素没有添加到父元素内吗？

于是我们应该这么写：

JS:

for (var i = 0; i < 10; i++) {
    
    
            var span = document.createElement('span');
            span.innerHTML = "你好"
            document.getElementsByClassName('content')[0].appendChild(span);
        }

通过代码我们可以看到每次循环都新创建了一个span元素，然后添加进了父元素内
JQuery形式：

for (var i = 0; i < 10; i++) {
    
    
            $('.content').append($('<span>你好</span>'));
        }

此时JQuery也是一样每次循环都$('<span>你好</span>')新建一个span元素

此时的效果就是我们的预期效果了

在这里插入图片描述