jQuery DOM 節(jié)點的插入
在上一章我們也初步了解了一些對節(jié)點的操作,現(xiàn)在我們來學習插入
動態(tài)創(chuàng)建的元素是不夠的,它只是臨時存放在內存中,最終我們需要放到頁面文檔并呈現(xiàn)出來。那么問題來了,怎么放到文檔上?
這里就涉及到一個位置關系,常見的就是把這個新創(chuàng)建的元素,當作頁面某一個元素的子元素放到其內部。針對這樣的處理,jQuery就定義2個操作的方法
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 中文網</div>') }) </script> <script type="text/javascript"> $("#bt2").on('click', function() { //.appendTo()剛好相反,內容在方法前面, //無論是一個選擇器表達式 或創(chuàng)建作為標記上的標記 //它都將被插入到目標容器的末尾。 $('<div class="appendTo">php.cn</div>').appendTo($(".content")) }) </script> </body> </html>