1http://www.365mini.com/page/jquery-append.htm

2http://blog.csdn.net/chaiyining007/article/details/8213699

jq1.7.1這個版本為例。

首先我們來看下jq api的說明：向每個匹配的元素內(nèi)部追加內(nèi)容。

這個操作與對指定的元素執(zhí)行appendChild方法，將它們添加到文檔中的情況類似。

這個方法接收1個參數(shù)：content，接受類型有4種(3種從1.0就有了，function從1.4之后開始有)

String：字符串，這個容易理解就是可以直接$("選擇器").append("aaaabbbbbcccc");這么寫，當(dāng)然jq內(nèi)部還支持$("選擇器").append('<a href="#"></a>');這種html標(biāo)簽的字符串，至于性能方面咋們后面看源碼的時候在細(xì)論。

Element：節(jié)點(diǎn)，這個也容易理解就是dom節(jié)點(diǎn)么基本上俺是寫成，$("選擇器").append(document.getElementsByTagName("a"))這類，不過這么寫的同學(xué)要注意一點(diǎn)，這么寫會將原來位置的dom給“剪切”到選擇器底部，請?jiān)试S我這么形容。

jQuery：jQuery對象，這注意這個對象是jq選擇器加工過的對象，比如$("選擇器1").append($(“選擇器2”));而不是$("選擇器1").append($);寫到這俺笑了，應(yīng)該沒人寫append($)這個是吧。

function(index, html)：一個function對象(參數(shù)后面講)，可以寫成$("選擇器").append(function(index,html){return ""});其中return "" 可以省略，任何函數(shù)都有返回值，沒寫return就會返回undefined，這個貌似高程或者權(quán)威指南有講，具體哪寫的，俺也忘記了。index參數(shù)為對象在這個集合中的索引值，要解釋這句話，我們看個例子吧

[javascript]view plaincopy

var_body=$("body");
_body.html('');//清空body
_body.append("<div></div><div></div>");//插入2個空div
$("div").append(function(){return"a"});//我們要用結(jié)果猜個答案，雖然不是必須用這個例子，不過反正到這了就這么寫了

看到結(jié)果，俺猜append方法內(nèi)部對整個選擇器進(jìn)行了遍歷，然后插入了函數(shù)返回的東西。

所以index和html很容易理解了，就是在便利過程中的index和index對應(yīng)的原先的html（插入之前）;

最后講一下，就是jq本身就是鏈?zhǔn)秸{(diào)用，所以append()返回的是選擇器選擇的對象被插之后的新對象，講的好邪惡。

可以$("選擇器").append().append().append().......................，不過一般都不會這么玩吧？

解釋完API我們來看看源碼

看到這個截圖...好吧我們繼續(xù)往下看。

[javascript]view plaincopy

domManip:function(args,table,callback){
//定義6個變量，我們先不管這些變量干嘛。
varresults,first,fragment,parent,
value=args[0],/*args參數(shù)在append調(diào)用的時候其實(shí)只有1個參數(shù)*/
scripts=[];
/*
進(jìn)行了各種判斷
1、!jQuery.support.checkClone：確保文檔碎片還沒有被克隆(作用在后面)
2、arguments.length===3，確保調(diào)用domManip這個函數(shù)只有3個參數(shù)，否則會往后面走，這個很妙
3、typeofvalue==="string"確認(rèn)你的參數(shù)是string類型
4、rchecked.test(value)
*/
if(!jQuery.support.checkClone&&arguments.length===3&&typeofvalue==="string"&&rchecked.test(value)){
//遍歷選擇器，看來我前面的猜測對了
returnthis.each(function(){
//看每次循環(huán)都調(diào)用了這個domManip，但是這些調(diào)用不會進(jìn)入這個if，為什么？仔細(xì)看上面的注釋與下面的調(diào)用
jQuery(this).domManip(args,table,callback,true);
});
}
//如果參數(shù)類型是function的
if(jQuery.isFunction(value)){
//還是遍歷
returnthis.each(function(i){
varself=jQuery(this);
/*
記得function的返回值嗎？這邊就把那邊的返回值存到args[0]里面了
table?self.html():undefined；這句話看不懂？table這個變量，在append調(diào)用domManip時已經(jīng)寫死了是true
所以在執(zhí)行function類型參數(shù)的時候那個index和html是什么這邊已經(jīng)很明顯了
*/
args[0]=value.call(this,i,table?self.html():undefined);
//取到插入的內(nèi)容之后，重復(fù)第一步......
self.domManip(args,table,callback);
});
}
/*
到了這里，已經(jīng)確保你取到了function中返回的string
上面的各種判斷已經(jīng)把你參數(shù)處理成接下去想要的，淡定的往下看吧
if(this[0])這個判斷。。。確保選擇器存在，為什么不放最前面？
*/
if(this[0]){
/*
取父級節(jié)點(diǎn)
&&運(yùn)算符就是
0&&1=0
1&&2=2
0&&0=0
*/
parent=value&&value.parentNode;

//Ifwe'reinafragment,justusethatinsteadofbuildinganewone
/*
如果已經(jīng)有元素碎片了就用原來的，不然就新建一個
*/
if(jQuery.support.parentNode&&parent&&parent.nodeType===11&&parent.childNodes.length===this.length){
results={fragment:parent};

}else{
results=jQuery.buildFragment(args,this,scripts);
}

fragment=results.fragment;
//取碎片中最后一個
if(fragment.childNodes.length===1){
first=fragment=fragment.firstChild;
}else{
first=fragment.firstChild;
}
//存在最后一個節(jié)點(diǎn)
if(first){
//確保最后一個元素是tr？
table=table&&jQuery.nodeName(first,"tr");

for(vari=0,l=this.length,lastIndex=l-1;i<l;i++){
callback.call(
table?
root(this[i],first):
this[i],
//Makesurethatwedonotleakmemorybyinadvertentlydiscarding
//theoriginalfragment(whichmighthaveattacheddata)insteadof
//usingit;inaddition,usetheoriginalfragmentobjectforthelast
//iteminsteadoffirstbecauseitcanendupbeingemptiedincorrectly
//incertainsituations(Bug#8070).
//Fragmentsfromthefragmentcachemustalwaysbeclonedandneverused
//inplace.
results.cacheable||(l>1&&i<lastIndex)?
jQuery.clone(fragment,true,true):
fragment
);
}
}
/*插入腳本文件的話jq會幫你去請求的*/
if(scripts.length){
jQuery.each(scripts,function(i,elem){
if(elem.src){
jQuery.ajax({
type:"GET",
global:false,
url:elem.src,
async:false,
dataType:"script"
});
}else{
jQuery.globalEval((elem.text||elem.textContent||elem.innerHTML||"").replace(rcleanScript,"/*$0*/"));
}

if(elem.parentNode){
elem.parentNode.removeChild(elem);
}
});
}
}

returnthis;
}

在往里面還有個底層buildFragment方法，我稍微看了，解釋起來頗為費(fèi)勁。

總結(jié)

以上是生活随笔為你收集整理的jquery append()详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。