jquery append 和appendTo

原文： https://www.cnblogs.com/stitchgogo/p/5721551.html

--------------------------------------------------------------------------

在jquery權威指南里面學習到這一章，很有必要介紹一下里面的內容：

 

首先是append(content)這個函數：

意思是將內容content加入到所選擇的對象內容的后面

例如：$("div").append("<p>" +  hello + "</p>");

意為在所有div元素里面添加一個p標簽，標簽內容為hello，如果div元素里面有其他的內容則在原來的內容后面添加新的內容

 

 

然后是appendTo(content)這個函數：

由To這個單詞我們便可得知這個函數的意思就是將什么加到什么中所以它和append()函數最大的區別就是：

內容和選擇器的位置，以及 append() 能夠使用函數來附加內容。而他們執行的任務都是一樣的

就如上面的例子：

$("div").append("<p>" + hello + "</p>");將p標簽加入到頁面所有div中

如果用appendTo就應該這樣寫：

$("<p>" + hello + "</p>").appendTo("div")

 

append還有另外一個形態

append(function(index,html){})

用法和原來的append是一樣的執行的任務也是一樣，但是function里面的index和html不要理所當然的以為是在第index個div下插入html內容，其實這兩個參數只是用來返回當前對象的索引值以及原始的內容

 

jquery代碼

$(function() {
            $("div").append(function(n,m){
                 
                   return "hello" + "索引值：" + n + "原始內容：" + m;
            });
        })

html代碼

     <p>hello</p>
     <div>jQuery 1</div>
     <div>jQuery 2</div>
     <div>jQuery 3</div>
     <div>jQuery 4</div>

 瀏覽器結果：

 

而prepend和prependTo的的用法和append，appendTo的用法是一樣的，只不過prepend和prependTo是在選中的對象內容的前面添加新內容