在做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
如何将一段代码替换成空？
如把：12121121 替换成 空 ？
是这样吗？如果是这样很容易，$('div').html('');
或者$('div').text('');
我想问下，appendTo移动的元素还响应原结构的事件，怎么解决这个问题啊？是用ajax刷新页面吗？