add()方法，$('li').add('<p>新的p元素</p>').appendTo($('.right'))怎么理解？

源自：6-9 jQuery遍历之add()方法

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传递元素标签</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>

案例中，第一个$('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>标签还是在<div class="left first-div">中，只是被添加到匹配的元素集合中也就是<ul>标签里

$('li').add('<p>新的p元素</p>').appendTo($('.right'))

点击第二个<button>得到结果，如图2：

（问题1）<p>标签还是在原来的<div class="left first-div">标签里，那么<div class="right">标签里的<p>标签为啥没有背景色？

(问题2)单击第一个<button>得到结果，如图3

<div class="right">标签里的<p>标签背景色为红色，为什么？

提问者：咖啡学者 2017-03-21 21:17

个回答

秦假仙

2017-03-21 22:42:42

已采纳

$('li').add('<p>新的p元素</p>').appendTo($('.right'))
先筛选li元素集合A（注意这里并没有筛选html文档中原本存在的p标签，后面添加的那个自己重新构建的一个p标签），然后将一个新的，注意是新的，重新构建的，原本html文档中没有的，这样一个<p>新的p元素</p> add到前面的集合A中，此时如果没有appendTo方法，那么这个新构建的p标签是不会显示到html文档中，那么你将看不到这个p标签，这里是用appendto方法，就是将这个集合中的dom对象重新追加到 <div class="right"></div>中，所以你会在这个div中看到从对象集合A加入到html文档的标签；懂了么？

7
澜若枫清

2017-04-19 17:32:27

厉害啦我的哥。

0