今天网上查资料的时候看到了 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() - 在被选元素的开头插入内容