jQuery源码分析之appendTo,prependTo,insertBefore,insertAfter,replaceWith函数

源码如下：请提前阅读阅读

var deletedIds = [];var push = deletedIds.push;jQuery.each({appendTo: "append",prependTo: "prepend",insertBefore: "before",insertAfter: "after",replaceAll: "replaceWith"}, function( name, original ) {jQuery.fn[ name ] = function( selector ) {var elems,i = 0,ret = [],//通过selector获取到选择的对象!insert = jQuery( selector ),//传入参数的个数，下标的最大值last = insert.length - 1;for ( ; i <= last; i++ ) {//如果是传入参数的最后一个对象的下标，那么返回调用对象，否则返回克隆对象//这里elems是jQuery对象elems = i === last ? this : this.clone(true);//把参数对象封装为jQuery对象，调用该jQuery对象的original方法，也就是//底层的append,prepend,before,after,replaceWith方法，传入的参数//调用对象!jQuery( insert[i] )[ original ]( elems );// Modern browsers can apply jQuery collections as arrays,//but oldIE needs a .get()//现代浏览器可以把jQuery集合作为数组，但是旧版本的IE浏览器不行，所以把elems//作为JS集合对象!//这个ret是空数组[]push.apply( ret, elems.get() );}//这里的length是2，因为调用者对象的length是2，$("p").length=2        //  alert(ret.length);//打印"n1n3"说明ret里面放入了两次调用对象组成的DOM对象集合//alert(ret[0].id+ret[1].id);return this.pushStack( ret )};});

$("p").appendTo("#n3");
注意:appendTo,prependTo,insertBefore,insertAfter,replaceAll底层调用的都是append,prepend,before,after,replaceWith，所以如果传入的参数是文档中已经存在的对象那么该对象将会从原来的位置上消失!

总结：

（1）这些方法返回的对象是一个jQuery对象，该对象保存了所有应该被添加的对象，也就是参数中的那些对象。之所以返回jQuery对象是通过pushStack完成的!

（2）该方法底层调用的before/after等方法，所以也会发生"buildFragment不创建对象(参数对象和调用对象一样)/元素移动(该DOM已经存在)"现象!

（3）上面ret中放的是副本，因为上面是this.clone(true),而且是会复制该元素的所有的数据和事件!