jquery html移动,复制,替换函数(append,clone,replaceWith等)

张映 发表于 2011-01-24

分类目录: js

标签:, , , , , , , ,

在做web前端的时候,我们经常会做一个特效,这个时候用到ajax来进行无刷新页面,来改变页面的内容,这个时候,我们就会对页面中的html进行添加,替换等,在接触jquery的这些html操作函数之前,我一般都是用js来完成的。个人觉得最快最方便的做法就是document.getElementById,document.getElementsByName这些方法,例如document.getElementById("id").html="<strong>aaa</strong>";这种方法有一点不好,就是你必须知道,有一个id或者是name,并且写法也比较长。反正看个人喜好吧。

一,测试文件test.html

<HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<script type="text/javascript" src="jquerymin.js"></script>
</head>
<body>
<p>this is a test </p>
<strong>51yip.com</strong>
<span>我不喜欢写代码</span>
</body>
</HTML>

二,jquery html移动,复制,替换函数,以及实例

1,append和prepend

相同点:都可以在本标签内进行html的插入。

不同点:append把html的内容插到本标签的尾部,而prepend是插入到本标签的头部。

<script type="text/javascript">
 $(document).ready(function(){
 $("strong").append("<div>my website</div>");          //用的append
 });
 </script>

结果如下(用firebug查看,源码看不到):

<strong>51yip.com<div>my website</div></strong>

<script type="text/javascript">
 $(document).ready(function(){
 $("strong").prepend("<div>my website</div>");
 });
 </script>

结果如下:

<strong><div>my website</div>51yip.com</strong>

2,appendTo和prependTo

相同点:把所有匹配的元素追加到另一个指定的元素集合中。

不同点:appendTo加到是结尾,prependTo加到开头

<script type="text/javascript">
 $(document).ready(function(){

 $("strong").prependTo($("span").next());    //将匹配的strong放到div的开头

 html="<p>我喜欢睡觉</p>";                     //自定义了一个变量

 $(html).appendTo($("span").next());           //将变量的内容用appendTo放到div的尾部,注意变量外要加上 $()
 });
 </script>

结果如下:

<div>
<strong>51yip.com</strong>                 //这个是prependTo产生的
i love game
<p>我喜欢睡觉</p>                                 //这个是appendTo产生的
</div>

这个例子和上面的例子,是完全相反的,一个是加到自己的标签内,一个不是加到自己的标签内。其实道理很简单,但是经常搞混淆,我想喜欢范这个错误的不只我一个。

3,insertAfter和insertBefore

相同点:都可以插入到匹配标签的外面

不同点:insertAfter插入到标签的后面,insertBefore插入到标签的前面

前面讲到了append,prepend,appendTo,prependTo都是将内容插入到标签内部,而这个二个就不同了。

<script type="text/javascript">
 $(document).ready(function(){

 $("strong").insertBefore($("span"));        //换成insertBefore

html="<p>我喜欢睡觉</p>";

$(html).insertAfter($("span"));                //换成insertBefore
 });
 </script> 

结果如下:

<strong>51yip.com</strong>                   //这个用insertBfore产生的
<span>我不喜欢写代码</span>
<p>我喜欢睡觉</p>                                  //这个用insertAfter产生的

上面我们提到的3对插入函数,完成了什么样的工作呢?其实就是一个移动的过程,$("strong").insertBefore($("span"));我们将strong标签,从原来的位置移动span标签的后面。既然是移动,那么移动后,原来的位置上就没有东西了。

4,clone和clone(true)

clone就可以解决例三结束提到的问题。

相同点:都可以对标签进行复制

不同点:clone只能对标签进行复制,而不能对标签绑订的事件进行复制,clone(true)可以对标签进行复制,对标签绑订的事件也能复制

<script type="text/javascript">
 $(document).ready(function(){
 $("strong").clone().insertAfter($("span"));
 });
 </script>

结果如下:

<strong>51yip.com</strong>
<span>我不喜欢写代码</span>
<strong>51yip.com</strong>       //这个就是复制后,并且插入到这里的。

从这个例子,我们可以看出,$("strong").clone().insertAfter($("span"));这一步其实就是一个复制,粘贴的过程。

<button>加一个</button>                                    //把这个标签加到测试文件中

<script type="text/javascript">
 $(document).ready(function(){
     $("button").click(function(){
        $(this).clone(true).insertAfter(this);                //点一个就会加一个,并且复制出来的,也可以点
//      $(this).clone().insertAfter(this);                     //这个和上面的有一点不同,就是复制出来的,不能点
    });
 });
 </script>

通过这二个例子,clone和clone(true)的区别已经很清楚了。

5,replaceWith和replaceAll

相同点:他们二个都可以进行,查找替换

不同点:写法不同,反正我是没有发现,他们二个有什么功能上的不同。

<script type="text/javascript">
 $(document).ready(function(){
 $("strong").replaceAll($("div"));                       //用strong标签把div标签都替换掉
//$("div").replaceWith($("strong"));                  //和上面的一样,没什么区别,写法不同
 });
 </script>

个人觉得,这二个方法只有一个够了,多了反而让人晕。



转载请注明
作者:海底苍鹰
地址:http://blog.51yip.com/jsjquery/1207.html

3 条评论

  1. websjy 留言

    如何将一段代码替换成空?
    如把:12121121 替换成 空 ?

  2. 张映 留言
    12121121

    是这样吗?如果是这样很容易,$('div').html('');
    或者$('div').text('');

  3. wendy 留言

    我想问下,appendTo移动的元素还响应原结构的事件,怎么解决这个问题啊?是用ajax刷新页面吗?

留下评论

留下评论
  • (必需)
  • (必需) (will not be published)
  • (必需)   3X2=?