Как бесконечно вставлять HTML элементы через jQuery?

Question

[Владик Лимонадик]

Здравствуйте.

var addedFoo = $( '<div class="foo">bar</div>'+
    			        '<div class="foo">bar</div'+
    			        '<div class="foo">bar</div' );

var addFooButton = $( '#add-foo' );

addFooButton.click(function(){
	        addedFoo.appendTo(this);
});

Работает, но добавляет элементы только один раз. А надо, чтобы мог добавлять хоть бесконечно.

Как реализовать? Через функцию и new ?

Answer 1

[Иван Беленков]

Инициализируйте переменную addedFoo при клике. jsfiddle.net/jrtmtan8
Насколько я понимаю, append-методы не добавляют один и тот же элемент несколько раз. А вот в случае клика вызывается новая анонимная функция со своей областью видимости. Поэтому переменная в ней воспринимается как новая.

Comments

[Владик Лимонадик]

Угу. У меня там был еще элемент, закрывающий её. Пришлось вставить ивент-листенер на закрывающий элемент внутрь ивент листенера, который вызывает вставку, иначе не работало.

Answer 2

[Виталий Перетятько]

еще вариант - клонировать елементы перед вставкой
addedFoo.clone().appendTo(this);
jsfiddle.net/whhk9thp

Comments

[Иван Беленков]

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