append、prepend 、after、 before的区别

今天网上查资料的时候看到了 append与prepend 现在总结下以上几个方法的区别

利用代码展示,例子

html

<div class="test1"><p>这个是用来测试append的</p></div>

<ul class="test2"><li></li></ul>

<script>

$(document).ready(function(){

var txt1=$( " <b></b>").text("love");

$(".test1").append(txt1);

alert($(".test1").html)

})

</script>

显示结果：

先是弹出，test1下所有的子元素，其中新增的<b></b>在test1中

此处我们再稍微写下appendTo方法与append的区别

以上个例子的HTML为模板

var txt = $("").text("love appendTo");          

  txt.appendTo(".test1")         

   alert("append-----"+$(".test1").html())

由此可见，append与appendTo的作用是一样的，只不过是写法是反的，假如div里面想增加一个a，如果是append的话$("div").append(a),如果是appendTo的话，就要返回来，$("div").append(a)

第二个例子：

<div class="test2"><p>这个是用来测试after的</p></div>

var txt2=$( "").text("hello world");           

 $(".test2").after(txt2)            

alert("after+++++"+$(".test2").html())

展示结果如下：

弹出所有的子元素，<i></i>并不在test2下面

prepend与before与上述类似。

总结如下：

append() & prepend()是在元素内插入内容（该内容变成该元素的子元素或节点），after() & before()是在元素的外面插入内容（其内容变成元素的兄弟节点）

1、append() - 在被选元素的结尾插入内容

2、prepend() - 在被选元素的开头插入内容

3、after() - 在被选元素之后插入内容

4、before() - 在被选元素之前插入内容