jquery添加插入元素

eg:

<div class='a'>
    <div class='b'>b</div>
</div>
<input type="button" value="append" id="one">
<input type="button" value="prepend" id="two">
<input type="button" value="after" id="three">
<input type="button" value="before" id="four">
<script src="//cdn.bootcss.com/jquery/2.0.2/jquery.js"></script>
<script>
    $("#one").click(function(){
        $('.a').append("<p>append</p>");
    });
    $("#two").click(function(){
        $('.a').prepend("<p>prepend</p>");
    });
    $("#three").click(function(){
        $('.a').after("<p>after</p>");
    });
    $("#four").click(function(){
        $('.a').before("<p>before</p>");
    });
</script>

1.点击append

<div class="a">
    <div class="b">b</div>
    <p>append</p>
</div>

2.点击prepend

<div class="a">
    <p>prepend</p>
    <div class="b">b</div>
</div>

3.点击after

<div class="a">
    <div class="b">b</div>
</div>
<p>after</p>

4.点击before

<p>before</p>
<div class="a">
    <div class="b">b</div>
</div>

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