问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

$.append(元素)不能重复插入元素，何解？

头像
夜深未眠ok
    25563145

    请老司机帮忙看一下，下面代码目的是将若干元素重复插入到一个容器中，似乎不太灵。
    1、插入的多个元素为什么只显示2个？
    2、后插入的p2，为什么反而在p1前面？

    谢谢您的解答，3Q感谢。

    图片描述

        <body>
        <div id="box-wrap">
            <h1>这是h1</h1>
        </div>
        <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var p1 = $("<div class='box'>p1</div>");
            var p2 = $("<div class='box'>p2</div>");
            //▲准备两个元素，稍后插入到容器中。
            //▼开始插入到容器中，但为什么这么多，只插入了2个？
            $("#box-wrap").append(p1);
            $("#box-wrap").append(p2);
            $("#box-wrap").append(p1);
            $("#box-wrap").append(p1);
            $("#box-wrap").append(p1);
        </script>
    </body>
    javascripthtmlhtml5jquery
    阅读 13k
    3 个回答
    得票最新
    头像
    cheapskate
      14611222
        var p1 = $("<div class='box'>p1</div>");
 var p2 = $("<div class='box'>p2</div>");

      因为你这样写，已经创建了dom对象了，jq框架中封装的append方法是这样的:

          append: function() {
        return this.domManip( arguments, function( elem ) {
            if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
                var target = manipulationTarget( this, elem );
                target.appendChild( elem );
            }
        });
    }

      框架中是通过appendChild来操作dom的，appendChild的作用是什么呢？请看w3c解答，它里面也提到可以将元素从一个元素移动到另一个元素，说白了，就是剪切的意思。因此你后面写的不是不起作用，而是在原地移动，因为就一个对象，你再怎么写也是一个。
      如果想要添加多个元素，怎么操作呢？有两个方法：
      1.直接将数据源放在append方法里面，这样的话，每次调用append方法都会重新生成dom对象

            $("#box-wrap").append("<div class='box'>p2</div>");

      2.使用克隆节点（深度克隆）

               var p1 = $("<div class='box'>p1</div>")[0];//需要转为dom对象哦
            var p2 = $("<div class='box'>p2</div>");
            var p3 = p1.cloneNode(true);
            $("#box-wrap").append(p1);
            $("#box-wrap").append(p2);
            $("#box-wrap").append(p3);

      最后，至于顺序不一样，是因为你append(p2)，后面又调用append(p1)了，所以就剪切了，再添加进去咯！

      头像
      physihan
        66512

        为什么要将p1，p2包装成jquery对象呢
        直接这么写就行了

         var p1 = "<div class='box'>p1</div>";
 var p2 = "<div class='box'>p2</div>";
        头像
        golden_freeman_china
          1.8k1211

          P1和p2就是两个对象啊!
          如果你想多次插入P1和P2，需要使用clone；

          p1 = $("<div></div>")
container = $(""#box-wrap"")
n1 = p1.clone().prependTo(container);
n2 = p1.clone().prependTo(container);
n3 = p1.clone().prependTo(container);
n4 = p2.clone().prependTo(container);
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题