两次追加 DOM 元素 (jQuery)

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);
});

提琴手

编辑：感谢有用的观点， .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());
});

您还可以从$foo附加html ，它只会在其中获取 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);
});

检查小提琴

Answer 4

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

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

Answer 5

我尝试了一个技巧，它奏效了。 我只是将一个按钮单击的功能嵌套在另一个中。 我的意思是我每次都改变父母以避免这个问题。 主要的是，当我为 button1 单击编写单击函数时，button2 逻辑写在它下面，而 button3 单击逻辑写在 button2 单击方法中，就像层次结构一样。 只看代码。 你会得到的。

 <!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 个解决方案

解决方案1
20 已采纳 2013-07-16 17:48:56

解决方案2
12 2013-07-16 17:48:47

解决方案3
9 2013-07-16 17:47:18

解决方案4
4 2013-07-16 17:48:43

解决方案5
0 2020-10-01 18:09:22

两次追加 DOM 元素 (jQuery)

问题描述

5 个解决方案

解决方案1 20 已采纳 2013-07-16 17:48:56

解决方案2 12 2013-07-16 17:48:47

解决方案3 9 2013-07-16 17:47:18

解决方案4 4 2013-07-16 17:48:43

解决方案5 0 2020-10-01 18:09:22

解决方案1
20 已采纳 2013-07-16 17:48:56

解决方案2
12 2013-07-16 17:48:47

解决方案3
9 2013-07-16 17:47:18

解决方案4
4 2013-07-16 17:48:43

解决方案5
0 2020-10-01 18:09:22