国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

jQuery DOM 節(jié)點的插入

在上一章我們也初步了解了一些對節(jié)點的操作,現(xiàn)在我們來學習插入

動態(tài)創(chuàng)建的元素是不夠的,它只是暫時存放在內存中,最終我們需要放到頁面文檔並呈現(xiàn)出來。那麼問題來了,要怎麼放到文件上?
這裡就牽涉到一個位置關係,常見的就是把這個新建立的元素,當作頁面某一個元素的子元素放到其內部。針對這樣的處理,jQuery定義2個操作的方法

QQ截圖20161025142026.png

append:這個操作與對指定的元素執(zhí)行原生的appendChild方法,將它們加入文件中的情況類似。

appendTo:實際上,使用這個方法是顛倒了常規(guī)??的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中。

註:append()和.appendTo()兩種方法功能相同,主要的不同是語法-內容和目標的位置不同

append()前面是被插入的對象,後面是要在物件內插入的元素內容

appendTo()前面是要插入的元素內容,而後面是被插入的物件

下面我們以實例來詳細說明:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    .content {
        width: 300px;
    }
    .append{
        background-color: blue;
    }
    .appendTo{
        background-color: red;
    }
    </style>
</head>

<body>
    <button id="bt1">append添加</button>
    <button id="bt2">appendTo添加</button>

    <div class="content"></div>

    <script type="text/javascript">

        $("#bt1").on('click', function() {
            //.append(), 內容在方法的后面,
            //參數(shù)是將要插入的內容。
            $(".content").append('<div class="append">php 中文網(wǎng)</div>')
        })
    </script>

    <script type="text/javascript">

        $("#bt2").on('click', function() {
            //.appendTo()剛好相反,內容在方法前面,
            //無論是一個選擇器表達式 或創(chuàng)建作為標記上的標記
            //它都將被插入到目標容器的末尾。
            $('<div class="appendTo">php.cn</div>').appendTo($(".content"))
        })

    </script>

</body>

</html>


#
繼續(xù)學習
||
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <style> .content { width: 300px; } .append{ background-color: blue; } .appendTo{ background-color: red; } </style> </head> <body> <button id="bt1">append添加</button> <button id="bt2">appendTo添加</button> <div class="content"></div> <script type="text/javascript"> $("#bt1").on('click', function() { //.append(), 內容在方法的后面, //參數(shù)是將要插入的內容。 $(".content").append('<div class="append">php 中文網(wǎng)</div>') }) </script> <script type="text/javascript"> $("#bt2").on('click', function() { //.appendTo()剛好相反,內容在方法前面, //無論是一個選擇器表達式 或創(chuàng)建作為標記上的標記 //它都將被插入到目標容器的末尾。 $('<div class="appendTo">php.cn</div>').appendTo($(".content")) }) </script> </body> </html>