Question

有人可以解释为什么以下代码段未向<foo>和#a添加#b吗？

HTML：

<div id="a"></div>
<div id="b"></div>

JS：

$(function(){
    var $foo = $("<foo>HI</foo>");
    $("#a").append($foo);
    $("#b").append($foo);
});

jsfiddle

编辑：感谢有用的点，.append()移动元素的事实解释了这种行为。由于我的应用程序中的元素实际上是Backbone View的.el，我宁愿不克隆它。

Answer 1

因为使用append实际上移动了元素。因此，您的代码正在将$foo移动到#a的文档中，然后将其从#a移至#b。你可以克服它而不是像你想要的那样克隆它 - 这样它就会附加一个克隆而不是初始元素：

$(function(){
    var $foo = $("<foo>HI</foo>");
    $("#a").append($foo.clone());
    $("#b").append($foo.clone());
});

您还可以从html附加$foo，这只会在其中包含dom的副本而不是元素本身：

$(function(){
    var $foo = $("<foo>HI</foo>");
    $("#a").append($foo[0].outerHTML);
    $("#b").append($foo[0].outerHTML);
});

以上示例假设您有一个更复杂的场景，其中$foo不仅仅是从字符串创建的jQuery对象...更有可能是从DOM中的元素创建的。

如果它实际上只是简单地以这种方式创建并且为此目的......根本没有理由创建jQuery对象，你可以简单地直接附加字符串本身（"<foo>HI</foo>"），像：

var foo = "<foo>HI</foo>";
$("#a").append(foo);
//...

Answer 2

试试clone。顾名思义，这将复制$foo元素，而不是像append那样移动。

$(function(){
    var $foo = $("<foo>HI</foo>");
    $("#a").append($foo.clone());
    $("#b").append($foo.clone());
});

但是，为什么不使用它？

$("#a,#b").append($foo);

这也有效：）

以下是这两种情况的演示：http://jsfiddle.net/hungerpain/sCvs7/3/

Answer 3

每次想要追加 DOM 时，您需要create a new instance。

否则它引用已经附加的相同实例。

删除要添加的新div之前的$符号，因为它评估为jQuery对象，并具有上述限制。或clone元素。

$(function(){
    var foo = "<foo>HI</foo>";
    $("#a").append(foo);
    $("#b").append(foo);
});

Check Fiddle

Answer 4

您可以使用.clone（）方法创建一个新实例以附加到DOM，因为您当前的代码只引用了两次相同的实例。

$(function(){
    var $foo = $("<foo>HI</foo>");
    var $foo2 = foo.clone();
    $("#a").append($foo);
    $("#b").append($foo2);
});

Answer 5

我尝试了一个把戏，并且奏效了。我只是嵌套了一个按钮单击另一个按钮的功能。我的意思是我每次都要更换父母以避免这个问题。最主要的是，当我为button1编写click函数时，将在其下编写button2逻辑，并在诸如层次结构的button2 click方法中编写button3 click逻辑。只看代码。你会明白的。

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
      integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
      crossorigin="anonymous"
    />

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>DOM Element Inserting!</h1>
    <div id="parent">
      <div id="result">
        <button id="btn1" type="submit" class="btn btn-primary">
          Start Cooking
        </button>
      </div>
    </div>
    <div id="parent2"></div>
    <div id="parent3"></div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
      integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
      integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
      crossorigin="anonymous"
    ></script>
    <script>
      $(document).ready(function () {
        $("#btn1").click(function () {
          $("#lt").remove();
          $("#parent2").html(`

                <button id="btn2" type="button" class="btn btn-success">
        Being Prepared
      </button>
                `);
          $("#btn1").remove();
          $("#btn2").click(function () {
            $("#parent3").html(`

                <button id="btn3" type="button" class="btn btn-info">
        Order Ready
      </button>
                `);
            $("#parent2").remove();
            $("#btn3").click(function () {
              alert("Order Completed!!");
            });
          });
        });
      });
    </script>
  </body>
</html>

两次追加DOM元素（jQuery）

5 个答案: