代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left {
width: auto;
height: 150px;
}
.left div {
width: 150px;
height: 120px;
padding: 5px;
margin: 5px;
float: left;
background: #bbffaa;
border: 1px solid #ccc;
}
</style>
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>add方法()</h2>
<div class="left first-div">
<div class="div">
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
<p>新的p元素</p>
</div>
</div>
<div class="right"></div>
<br/>
<button>点击：add传递元素标签</button>
<button>点击：add传递html结构</button>
<script type="text/javascript">
$("button:first").click(function() {
//把p元素添加到li的合集中
$('li').add('p').css('background', 'red')
})
</script>
<script type="text/javascript">
$("button:last").click(function() {
//把html结构'<p>新的p元素</p>'
//加入到li的合集中，为了能够在页面上显示
//需要再重新appendTo到指定的节点处
//值得注意：整个结构位置都改变了
$('li').add('<p>新的p元素</p>').appendTo($('.right'))
})
</script>
</body>
出现的疑问和答案：
1.$('li').add('<p>新的p元素</p>').appendTo($('.right'))
这句第一次运行时，会把所有选中的li都剪切到$(".right")中，
appendTo()语法：
appendTo(target)
把包装集里所有元素移动到指定目标的内容的末尾
参数
target (字符串|元素)一个包含jquery选择器的字符串，或一个DOM元素。包装集各元素将追加到target所指定的那个位置。如果多个元素与一个选择器字符串匹配，则包装集各元素将被复制并追加到与选择器匹配的每个元素。
如果目的地只标识一个目标元素，则元素被移动；如果目的地标识多个目标元素，则源元素留在原始位置，且被复制到每个目标元素。
2.还是这句，第二次执行就只会再出现一个p元素了。
当 $() 传的参数是元素，那么只能appendTo 一次，如果参数是dom，那么可以多次appendTo()。你这句代码中 <p>新的p元素</p> 是dom，前面的 li 是元素，所以第二次只添加后面的，当你将后面的参数换成元素，比如 p ，那么后面的也只能appendTo 一次