JQuery 添加元素要注意的问题

最新推荐文章于 2022-06-19 19:02:32 发布

_荣耀之路_

最新推荐文章于 2022-06-19 19:02:32 发布

阅读量148

点赞数

分类专栏： JQuery 文章标签： append appendTo prepend prependTo 选择器

本文链接：https://blog.csdn.net/asty9000/article/details/84654665

版权

JQuery 同时被 2 个专栏收录

31 篇文章 2 订阅

订阅专栏

JavaScript

28 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
        $("p").append($("#hel"));
	//$("p").append($("[id=hel]"));
	//$("p").append("<strong id='hel' name='hel'>Hello world!!!</strong>");
	  
  });
});
</script>
</head>

<body>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<p>这是第三个段落。</p>
<button id="btn1">添加文本</button>
<strong id='hel' name='hel'>Hello world!!!</strong>
</body>
</html>

如上代码，以append为例（appendTo、prepend、prependTo与之相同），使用三种方式向p元素中添加strong元素。

如果只添加一次，则前两种方式都会选中body中的strong元素，将移除此元素并进行克隆后，分别添加到三个p元素的末尾。而第三种方式不会移动body中的strong元素，会分别在三个p元素的末尾添加一个strong元素。

如果连续添加多次，则前两种方式也会有区别：

1.使用第一种方式时，因为append传入的选择器为主键选择器，此选择器只会选中第一个匹配的元素，因此，从第二次添加开始，$("[id=hel]")每次都会选中第一个p元素中的strong元素，将此strong元素移除并进行克隆后，分别添加到三个p元素的末尾，因此第一个p元素中总是只包含一个strong元素，而后面的p元素则每次追加一个strong元素。

2.使用第二种方式时，因为append传入的选择器为属性选择器，此选择器只会选中所有匹配的元素，因此，从第二次添加开始，$("[id=hel]")每次都会选中三个p元素中所有的strong元素，将选中的strong元素移除并克隆后，分别添加到三个p元素的末尾，因此p元素中的strong元素的数量是p元素数量的N-1次方，N为添加次数。

3.使用第三种方式时，因为append传入的是html字符串，所以每次都是在p元素后面追加一个strong元素。