为了账号安全,请及时绑定邮箱和手机立即绑定

老司机来解答一下,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>


  1. 添加的位置在div  class=“right”这个标签上,前面css代码并没有给right标签设置样式,这里为什么默认的是绿色的背景呢?

  2. 动态创建了p标签加入到“li”这个合集中,为什么显示器上只有动态创建的标签而没有li标签呢?

正在回答

2 回答

楼上正解,其实楼主的疑惑,你可以按下F12打开调试工具,看看究竟出现了什么变化,同时,建议您复习一下之前JQ的appendTo()的规则,你就知道大概什么为什么会是这个结果了。

0 回复 有任何疑惑可以回复我~

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>里。


1 回复 有任何疑惑可以回复我~
#1

风飘叶摇

楼上正解。
2017-12-02 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

老司机来解答一下,2个问题,问题在底层

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信