老司機來解答一下，2個問題，問題在底層
<!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="http://libs.baidu.com/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>
</html>
添加的位置在div ?class=“right”這個標簽上，前面css代碼并沒有給right標簽設置樣式，這里為什么默認的是綠色的背景呢？
動態創建了p標簽加入到“li”這個合集中，為什么顯示器上只有動態創建的標簽而沒有li標簽呢？
2017-12-02
樓上正解，其實樓主的疑惑，你可以按下F12打開調試工具，看看究竟出現了什么變化，同時，建議您復習一下之前JQ的appendTo()的規則，你就知道大概什么為什么會是這個結果了。
2017-09-13
1、前面css代碼沒有給<div class="right"></div>設置樣式，該div沒有默認綠色的背景。綠色背景的div是<div class="left"></left>。
2、add()方法不是直接對html操作。
$('li').add('<p>新的元素</p>')的結果是產生新集合：
[<li>...</li>,<li>...</li>,...,<li>...</li>,<p>新的元素</p>]。
這個時候沒有appendTo()方法，所以p元素不會顯示在html中。
用appendTo()方法，上面新集合里的dom對象會按照appendTo()的規則加到?<div?class="right"></div>里。