您的位置：首页 > 移动开发

jquery中关于append()的用法笔记---append()节点移动与复制之说

2013-12-24 15:59 381 查看

jquery中关于append()的用法笔记---append()节点移动与复制之说

　　今天看一本关于jquery的基础教程，看到其中一段代码关于append()的一行，总是百思不得其解。于是查了查官方的文档，貌似对这个解释的不是特别清楚。于是，亲自写了一段小白代码做了下测试，这才明白怎么回事。简言之就是，如果是将一个节点（本身存在于文档中）同时append（）到很多节点下，那么就是同时复制到每个节点下一份；如果是将一个节点（本身存在于文档中）append()到一个节点下，那就是移动，并不会复制多份；而另一种情况是，如果新创建的一个节点字符串，不管是同时append()一个节点下还是很多个节点下，那么都是将这个复制到每一个节点下的。好了，废话不多说了，下面上代码。

　　1、原来的HTML，在这里test.js里面没有东西暂时未空的

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>

<script src="jquery.js"></script>
<script src="test.js"></script>
</head>
<body>
<span>Hello,LaoXu!</span>
<p></p>
<p></p>
<p></p>

</body>
</html>

　　运行效果图

　　2、编写test.js，选中一个节点，同时append()到很多节点下

$(function(){
$('p').append($('span'));
});

　　运行效果如下（原来的span标签被移动并同时复制到p标签下）：

　　3、修改test.js，选中一个节点，一次append()到一个节点下

　　

$(function(){
$('p:eq(0)').append($('span'));
$('p:eq(1)').append($('span'));
$('p:eq(2)').append($('span'));
});

　　效果如下：

　　

　　在debug下看，知道span被移动到了最后一个p下。

　　4、新建一个字符串，将其同时append()到很多节点下：

　　

$(function(){
var abc = "<span>Hello,LaoXu!<span>";
$('p').append(abc);
});

　　效果图：

　　可见，同时复制到了每个节点下。

　　5、新建一个字符串，将其每次append()到一个节点下：

　　

$(function(){
var abc = "<span>Hello,LaoXu!<span>";
$('p:eq(1)').append(abc);
$('p:eq(2)').append(abc);
$('p:eq(0)').append(abc);
});

　　效果如下：

　　

　　结果跟上图情况一样。

　　废话了半天，总之一句话，append()是将一个本身存在的节点append()到很多节点下，那就是将原来的节点同时复制到每个节点下，同时原来的节点消失；如果是将一个节点每次append()到一个节点下，那就是移动。如果是新建的字符串节点，那都是复制。

　　废话了半天，一点愚见，欢迎交流。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航