当我第二次点击第二个按钮，为什么只有li被剪切？
$('li').add('<p>新的p元素</p>').appendTo($('.right'))
这句不是将<p>新的p元素</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标签
add('<p>新的p元素</p>')里的'<p>新的p元素</p>'是动态创建的P标签，其和li一起appendTo了。而你说的p原本就存在于文档页面中了，要想让其和li一起appendTo，需要这样写：$('li').add('p').appendTo($('.right'))，add('p')的'p'其实是一个选择器表达式。
我试了一下appendTo()，当 $() 传的参数是元素，那么只能appendTo 一次，如果参数是dom，那么可以多次appendTo()。你这句代码中 <p>新的p元素</p> 是dom，前面的 li 是元素，所以第二次只添加后面的，当你将后面的参数换成元素，比如 p ，那么后面的也只能appendTo 一次