Добавление дважды элемента DOM (jQuery)

Может кто-нибудь объяснить, почему следующий фрагмент не добавляет <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, я предпочитаю не клонировать его.

Ответы

Ответ 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);
//...

Ответ 2

Вам нужно create a new instance каждый раз, когда вы хотите добавить к DOM.

В противном случае это относится к тому же экземпляру, который уже был добавлен.

Удалите символ $, предшествующий добавлению нового div, который оценивается объектом jQuery и имеет ограничения, указанные выше. или clone.

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

Проверить скрипт

Ответ 3

Попробуйте 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/

Ответ 4

Вы можете использовать метод .clone() для создания нового экземпляра для добавления в DOM, так как ваш текущий код просто ссылается на один и тот же экземпляр дважды.

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