突然明白了，盗用@C0EEC3F7BBAA大神的回答

你第一次点击的时候取出.div里的三个li并加上新的p添加到div.right里，此时.right里有三个li一个p

第二次点的时候你把三个li取出，此时.right里只剩一个p（暂且取名‘次新p’），你再用三个li加一个新p添加到.right中时是添加到次新p的下面，就造成了你所看到的现像，其实最下面的p和三个li才是新添加的，上面的是以前的

是在之后添加的，但是当新添加一个p标签时，会移动到li标签上面去，虽然我也不知道为什么，只是试了一下

html中的变化是这样的

<li>list item 1</li>

<li>list item 2</li>

<li>list item 3</li>

<p>新的p元素</p>

变成

<p>新的p元素</p>

<li>list item 1</li>

<li>list item 2</li>

<li>list item 3</li>

<p>新的p元素</p>

也就是你剪切了li，而原来的p并没有剪切

$('li').add('<p>新的p元素</p>').appendTo($('.right'))这句话是把li新添加一个p标签，然后再剪切到.right类中，这句话并没有选择原来的p标签，而是新增了一个p标签

是在之后的 你可以打开控制台看结构