admin 管理员组文章数量: 1184232
2024年1月18日发(作者：常用的8个函数求导公式)
jquery html移动,复制,替换函数(append,clone,replaceWith等)
张映
发表于 2011-01-24
分类目录： js/jquery
在做web前端的时候，我们经常会做一个特效，这个时候用到ajax来进行无刷新页面，来改变页面的内容，这个时候，我们就会对页面中的html进行添加，替换等，在接触jquery的这些html操作函数之前，我一般都是用js来完成的。个人觉得最快最方便的做法就是mentById，mentsByName这些方法，例如mentById("id").html="aaa"；这种方法有一点不好，就是你必须知道，有一个id或者是name,并且写法也比较长。反正看个人喜好吧。
一，测试文件
查看复制打印?
1.
2.
3.
4.
5.
6.
7.
this is a test
8.
9. 我不喜欢写代码
10.
11.
二，jquery html移动，复制，替换函数，以及实例
1，append和prepend
相同点：都可以在本标签内进行html的插入。
不同点：append把html的内容插到本标签的尾部，而prepend是插入到本标签的头部。
查看复制打印?
1.
6.
7. 结果如下（用firebug查看，源码看不到）：
8.
9.
10.
11.
16.
17. 结果如下：
18.
19.
2，appendTo和prependTo
相同点：把所有匹配的元素追加到另一个指定的元素集合中。
1
不同点：appendTo加到是结尾，prependTo加到开头
查看复制打印?
1.
11.
12. 结果如下：
13.
14.
15. //这个是prependTo产生的
16. i love game
17.
我喜欢睡觉
//这个是appendTo产生的18.
这个例子和上面的例子，是完全相反的，一个是加到自己的标签内，一个不是加到自己的标签内。其实道理很简单，但是经常搞混淆，我想喜欢范这个错误的不只我一个。
3，insertAfter和insertBefore
相同点：都可以插入到匹配标签的外面
不同点：insertAfter插入到标签的后面，insertBefore插入到标签的前面
前面讲到了append,prepend,appendTo,prependTo都是将内容插入到标签内部，而这个二个就不同了。
查看复制打印?
1.
11.
12. 结果如下：
13.
14. //这个用insertBfore产生的
15. 我不喜欢写代码
16.
我喜欢睡觉
//这个用insertAfter产生的上面我们提到的3对插入函数，完成了什么样的工作呢？其实就是一个移动的过程，$("strong").insertBefore($("span"));我们将strong标签，从原来的位置移动span标签的后面。既然是移动，那么移动后，原来的位置上就没有东西了。
4，clone和clone(true)
2
clone就可以解决例三结束提到的问题。
相同点：都可以对标签进行复制
不同点：clone只能对标签进行复制，而不能对标签绑订的事件进行复制，clone(true)可以对标签进行复制，对标签绑订的事件也能复制
查看复制打印?
1.
6.
7. 结果如下：
8.
9.
10. 我不喜欢写代码
11. //这个就是复制后，并且插入到这里的。
从这个例子，我们可以看出，$("strong").clone().insertAfter($("span"));这一步其实就是一个复制，粘贴的过程。
查看复制打印?
1. //把这个标签加到测试文件中
2.
3.
通过这二个例子，clone和clone(true)的区别已经很清楚了。
5，replaceWith和replaceAll
相同点：他们二个都可以进行，查找替换
不同点：写法不同，反正我是没有发现，他们二个有什么功能上的不同。
查看复制打印?
1.
个人觉得，这二个方法只有一个够了，多了反而让人晕。
3
版权声明：本文标题：jquery html移动,复制,替换函数(append,clone,replaceWith等)_百 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1705545562a489334.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论