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

来源：互联网发布：京东最开始的域名编辑：程序博客网时间：2024/05/05 18:04

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

一，测试文件test.html

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

<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>

<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产生的

<script type="text/javascript"> $(document).ready(function(){ $("strong").insertBefore($("span"));        //换成insertBeforehtml="<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> //这个就是复制后，并且插入到这里的。

<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>

<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>

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

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