appendTo()小体会

　　今天看jquery API发现一个有趣的现象，调用appendTo()后，发现调用的对象从原来的位置上消失了，而是出现在appendTo()的参数里

1 <p>this is a p</p>
2 <div></div>
3 <div></div>
4 <div></div>
5 <div></div>

然后执行一句$('p').appendTo('div')后，firebug截图：

原来的p没了，消失了，那么他是彻底消失了吗？我们验证一下：

添加end()后，即$('p').appendTo('div').end()后，firebug截图：

html结构没变，但是console.log结果变了，然后在添加一个类名看看，

$('p').appendTo('div').end().addClass('test')执行后，firebug截图：

可以看出添加了一个test类名，但是为什么只有1个呢，为什么不是4个呢？然后再去掉end()看看，

$('p').appendTo('div').addClass('test')执行后，firebug截图：

这样就是4个test了，但是这是为什么呢？为什么加了end()就只给第一个p加test，去掉后就给4个p加test？第一个p是我们原来的p吗？

其实这个在API里面已经有解释：

用红线画的才是最重要的，console里面打出的是所有被追加的内容，因为被添加到4个div里面，所以他返回4个p的对象，（jq选择器返回的都是一个对象集合），然而我们先前选中的p只有一个，所以这4个p里有可能包含原来的一个p，那么如果有的话，他为什么从原来的位置到了新的位置呢？

这就涉及到appendTo这个方法执行顺序问题了。appendTo()执行顺序是先从原来的位置删除这个元素，然后把这个元素插入到指定的位置。api里面有一段解释：，也就是如果有多个匹配的元素，那么就会克隆要插入的元素，然后插入到每个匹配的目标里，最后返回一个由原始元素和克隆元素组成的集合。所以理解了这个就不难理解为什么上面4个p里有一个原来的p，为什么他不在原来的位置出现在新的位置的困惑。那么，要想回到最初选择的那个p，用end()。这里又涉及到end()的用法，对一个jquery对象执行一串方法，就相当于把每一个方法的执行结果压入堆栈，而end()就是pop出最后一个方法的执行结果，将状态像倒带一样倒回前一个状态。这里appendTo()将执行结果到每一个匹配的div上，所以一end()将他倒回只有一个p的时代。api里这样解释：