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() - 在被选元素的开头插入内容
