Question

我有以下html：

<div id="one"></div>
<div id="two"></div>

当我在jquery中运行以下代码时：

$(function () {
    var span  = $("<span>name</span>");
    $("#one").append(span);
    $("#two").append(span);
});

跨度仅添加到最后一个div：

<div id="one"></div>
<div id="two"><span>name</span></div>

我希望将它添加到两个div中，为什么不添加？

Answer 1

每个DOM元素都可以连接到一个特定的父元素。您不能将相同的DOM元素附加到两个DOM父项。的 Refer SO

在这种情况下，您必须clone节点。

$(function () { var span = $("<span>name</span>"); $("#one").append(span); $("#two").append(span.clone()); });

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <div id="one"></div> <div id="two"></div>

Answer 2

更新您的脚本

$(function () {
    var span  = $("<span>name</span>");
    $("#one, #two").append(span);

});

Answer 3

使用下面的代码它会起作用。 DEMO

DOM元素无法追加两次。

$("<span>name</span>").appendTo("#one,#two");

Answer 4

您需要使用clone()

var span  = $("<span>name</span>");
    $("#one").append(span);
    $("#two").append(span.clone());

Answer 5

会发生什么情况，您的元素会附加到#one，但会立即将其附加到#two

$(function () {
    var span  = $("<span>name</span>");
    $("#one").append(span);
    setTimeout(function(){
        $("#two").append(span);
    },2000)
});

选中 Fiddle with timeout

使用组合选择器：appendTo('#one,#two')

<强>答案

$(function () {
    var span  = $("<span>name</span>");
    $(span).appendTo("#one,#two");
});

<强> Demo

Answer 6

嗨，你也可以试试这个

$(function () {
    var span  = $("<span>name</span>");
   $("#one").append(span);
    $("#two").append(span.html());
});

http://jsfiddle.net/72ky7o28/

为什么jquery不会将创建的span插入到两个div中？

6 个答案: