add()方法，$('li').add('<p>新的p元素</p>').appendTo($('.right'))怎么理解？
<%@?page?language="java"?contentType="text/html;?charset=UTF-8"
????pageEncoding="UTF-8"%>
<!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;
????}
????.right{
????????width:?150px;
????????height:?120px;
????????padding:?5px;
????????margin:?5px;
????????background:?chocolate;
????????border:?1px?solid?azure;
????}
????</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傳遞元素標(biāo)簽</button>
????<button>點擊：add傳遞html結(jié)構(gòu)</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結(jié)構(gòu)'<p>新的p元素</p>'
?????????//加入到li的合集中，為了能夠在頁面上顯示
?????????//需要再重新appendTo到指定的節(jié)點處
?????????//值得注意：整個結(jié)構(gòu)位置都改變了
?????????$('li').add('<p>新的p元素</p>').appendTo($('.right'))
????})
????</script>
</body>
</html>案例中，第一個$('li').add('p')是把<p>新的p元素</p>添加到li的集合中也就是如圖1代碼如下:
<ul> <li>list?item?1</li> <li>list?item?2</li> <li>list?item?3</li> <p>新的p元素</p> </ul>
但實際上<p>標(biāo)簽還是在<div class="left first-div">中，只是被添加到匹配的元素集合中也就是<ul>標(biāo)簽里
$('li').add('<p>新的p元素</p>').appendTo($('.right'))點擊第二個<button>得到結(jié)果，如圖2：
（問題1）<p>標(biāo)簽還是在原來的<div class="left first-div">標(biāo)簽里，那么<div class="right">標(biāo)簽里的<p>標(biāo)簽為啥沒有背景色？
(問題2)單擊第一個<button>得到結(jié)果，如圖3
<div class="right">標(biāo)簽里的<p>標(biāo)簽背景色為紅色，為什么？
2017-03-21
$('li').add('<p>新的p元素</p>').appendTo($('.right'))
先篩選li元素集合A（注意這里并沒有篩選html文檔中原本存在的p標(biāo)簽，后面添加的那個自己重新構(gòu)建的一個p標(biāo)簽），然后將一個新的，注意是新的，重新構(gòu)建的，原本html文檔中沒有的，這樣一個<p>新的p元素</p>?add到前面的集合A中，此時如果沒有appendTo方法，那么這個新構(gòu)建的p標(biāo)簽是不會顯示到html文檔中，那么你將看不到這個p標(biāo)簽，這里是用appendto方法，就是將這個集合中的dom對象重新追加到?<div?class="right"></div>中，所以你會在這個div中看到從對象集合A加入到html文檔的標(biāo)簽；懂了么？
2017-04-19
厲害啦? 我的哥。