jquery html移动,复制,替换函数(append,clone,replaceWith等)
张映 发表于 2011-01-24
分类目录： js/jquery
在做web前端的时候，我们经常会做一个特效，这个时候用到ajax来进行无刷新页面，来改变页面的内容，这个时候，我们就会对页面中的html进行添加，替换等，在接触jquery的这些html操作函数之前，我一般都是用js来完成的。个人觉得最快最方便的做法就是ElementById，ElementsByName这些方法，例如ElementById("id").html="<strong>aaa</strong>"；这种方法有一点不好，就是你必须知道，有一个id或者是name,并且写法也比较长。反正看个人喜好吧。
一，测试文件test.html
查看复制打印?
1. <HTML>
2. <head>
3. <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
4. <script type="text/javascript" src="jquerymin.js"></script>
5. </head>
6. <body>
7. <p>this is a test </p>
8. <strong>51yip</strong>
9. <span>我不喜欢写代码</span>
10. </body>
11. </HTML>
二，jquery html移动，复制，替换函数，以及实例
1，append和prepend
相同点：都可以在本标签内进行html的插入。
不同点：append把html的内容插到本标签的尾部，而prepend是插入到本标签的头部。
查看复制打印?
1. <script type="text/javascript">
2. $(document).ready(function(){
3. $("strong").append("<div>my website</div>"); //用的append
4. });
5. </script>
6.
7. 结果如下（用firebug查看，源码看不到）：
8.
9. <strong>51yip<div>my website</div></strong>
10.
11. <script type="text/javascript">
12. $(document).ready(function(){
13. $("strong").prepend("<div>my website</div>");
14. });
15. </script>
16.
17. 结果如下：
18.
19. <strong><div>my website</div>51yip</strong>
2，appendTo和prependTo
相同点：把所有匹配的元素追加到另一个指定的元素集合中。
不同点：appendTo加到是结尾，prependTo加到开头
查看复制打印?
1. <script type="text/javascript">
2. $(document).ready(function(){
3.
4. $("strong").prependTo($("span").next()); //将匹配的strong放到div的开头
5.
6. html="<p>我喜欢睡觉</p>"; //自定义了一个变量
7.
8. $(html).appendTo($("span").next()); //将变量的内容用appendTo放到div的尾部，注意变量外要加上 $()
9. });
10. </script>
11.
12. 结果如下：
13.
14. <div>
15. <strong>51yip</strong> //这个是prependTo产生的
16. i love game
17. <p>我喜欢睡觉</p> //这个是appendTo产生的
18. </div>
这个例子和上面的例子，是完全相反的，一个是加到自己的标签内，一个不是加到自己的标签内。其实道理很简单，但是经常搞混淆，我想喜欢范这个错误的不只我一个。
3，insertAfter和insertBefore
相同点：都可以插入到匹配标签的外面
不同点：insertAfter插入到标签的后面，insertBefore插入到标签的前面
前面讲到了append,prepend,appendTo,prependTo都是将内容插入到标签内部，而这个二个就不同了。
查看复制打印?
1. <script type="text/javascript">
2. $(document).ready(function(){
3.
4. $("strong").insertBefore($("span")); //换成insertBefore
5.
6. html="<p>我喜欢睡觉</p>";
7.
8. $(html).insertAfter($("span")); //换成insertBefore
9. });
10. </script>
11.
12. 结果如下：
13.
14. <strong>51yip</strong> //这个用insertBfore产生的
15. <span>我不喜欢写代码</span>
16. <p>我喜欢睡觉</p> //这个用insertAfter产生的
上面我们提到的3对插入函数，完成了什么样的工作呢？其实就是一个移动的过程，$("strong").insertBefore($("span"));我们将strong标签，从原来的位置移动span标签的后面。既然是移动，那么移动后，原来的位置上就没有东西了。
4，clone和clone(true)
clone就可以解决例三结束提到的问题。
相同点：都可以对标签进行复制
不同点：clone只能对标签进行复制，而不能对标签绑订的事件进行复制，clone(true)可以对标签进行复制，对标签绑订的事件也能复制
查看复制打印?
1. <script type="text/javascript">
2. $(document).ready(function(){
3. $("strong").clone().insertAfter($("span"));
4. });
5. </script>
6.
7. 结果如下：
8.
9. <strong>51yip</strong>
10. <span>我不喜欢写代码</span>
11. <strong>51yip</strong> //这个就是复制后，并且插入到这里的。
从这个例子，我们可以看出，$("strong").clone().insertAfter($("span"));这一步其实就是一个复制，粘贴的过程。
查看复制打印?
1. <button>加一个</button> //把这个标签加到测试文件中jquery在一个元素后追加标签
2.
3. <script type="text/javascript">
4. $(document).ready(function(){
5. $("button").click(function(){
6. $(this).clone(true).insertAfter(this); //点一个就会加一个，并且复制出来的，也可以点
7. // $(this).clone().insertAfter(this); //这个和上面的有一点不同，就是复制出来的，不能点
8. });
9. });
10. </script>
通过这二个例子，clone和clone(true)的区别已经很清楚了。
5，replaceWith和replaceAll
相同点：他们二个都可以进行，查替换
不同点：写法不同，反正我是没有发现，他们二个有什么功能上的不同。
查看复制打印?
1. <script type="text/javascript">
2. $(document).ready(function(){
3. $("strong").replaceAll($("div")); //用strong标签把div标签都替换掉
4. //$("div").replaceWith($("strong")); //和上面的一样，没什么区别，写法不同
5. });
6. </script>
个人觉得，这二个方法只有一个够了，多了反而让人晕。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论