JavaScript 的jQuery 方法prepend before什么区别?附代码.

这俩我怎么做了个实验,效果一模一样?

<head>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <title>jQuery 添加节点 prepend</title>
</head>


<style>
    body{margin:0px;padding:0px;font-size:11px;line-height:13px;}

    #a{float: left;background-color:#ffc6df;width:550px;height:300px;overflow: hidden;}

    #b{float: left;background-color:#459df5;width:550px;height:300px;overflow: hidden;}
    
    .hz{color:red;}
    .lz{color:blue;}    

</style>


<script>

    function AddQian()
    {
    $("pp").prepend("<p class=\"hz\">这是.prepend.在之前插入的!</p>");
    };


    function AddHou()
    {
    $("pp").append("<p class=\"lz\">这是.append.在之后插入的!</p>");
    };


    function AddQian2()
    {
    $("pp").before("<p class=\"hz\">这是.before.在之前插入的!</p>");
    };


    function AddHou2()
    {
    $("pp").after("<p class=\"lz\">这是.after.在之后插入的!</p>");
    };



</script>

    <button onclick="AddQian()">在前</button>
    <button onclick="AddHou()">在后</button>
    <button onclick="AddQian2()">在前1</button>
    <button onclick="AddHou2()">在后2</button>

    <br>

<boby>

    <div id="a">
        <pp>这是原始的,被【pp】包裹的。</pp>
        <pp>这是原始的,被【pp】包裹的。</pp>
    </div>

    <div id="b"></div>

</boby>

一个是元素内，一个是元素外

<div class="out">
<!--$('.out').prepend 和 $('.inside').before 都出现在这里-->
    <div class="inside"></div>
</div>

【热门文章】