js中常用追加元素的幾種方法：append，appendTo，after，before，insertAfter，insertBefore，appendChild

js中常用追加元素的幾種方法,點擊下面每個按鈕，即可查看效果

附上js代碼：

<script type="text/javascript">// <![CDATA[
$(function(){  
        //append(),在父級最后追加一個子元素  
        $(".append").click(function(){  
            $("#wrap").append("<p class='three'>我是子元素append</p>");  
        });  
          
        //appendTo(),將子元素追加到父級的最后  
        $(".appendTo").click(function(){  
            $("<p class='three'>我是子元素appendTo</p>").appendTo($("#wrap"));  
        });  
          
        //prepend(),在父級最前面追加一個子元素  
        $(".prepend").click(function(){  
            $("#wrap").prepend("<p class='three'>我是子元素prepend</p>");  
        });  
          
        //prependTo(),將子元素追加到父級的最前面  
        $(".prependTo").click(function(){  
            $("<p class='three'>我是子元素prependTo</p>").prependTo($("#wrap"));  
        });  
          
        //after(),在當前元素之后追加（是同級關系）  
        $(".after").click(function(){  
            $("#wrap").after("<p class='siblings'>我是同級元素after</p>");  
        });  
          
        //before(),在當前元素之前追加（是同級關系）  
        $(".before").click(function(){  
            $("#wrap").before("<p class='siblings'>我是同級元素before</p>");  
        });  
          
        //insertAfter(),將元素追加到指定對象的后面（是同級關系）  
        $(".insertAfter").click(function(){  
            $("<p class='three'>我是同級元素insertAfter</p>").insertAfter($("#wrap"));  
        });  
        //insertBefore(),將元素追加到指定對象的前面（是同級關系）  
        $(".insertBefore").click(function(){  
            $("<p class='three'>我是同級元素insertBefore</p>").insertBefore($("#wrap"));  
        });  
    });   
      
    //appendChild(),在節點的最后追加子元素  
    function appChild(){  
            // 創建p節點  
            var para=document.createElement("p");  
            // 創建文本節點  
            var node=document.createTextNode("我是子集appendChild新段落。");  
            // 把文本節點添加到p節點里  
            para.appendChild(node);  
               
            // 查找div1  
            var element=document.getElementById("wrap");  
            // 把p節點添加到div1里  
            element.appendChild(para);  
    }
// ]]></script>

 

效果：

我是第一個子元素

我是第二個子元素

append appendTo prepend prependTo after before appendChild insertAfter insertBefore