Как клонировать html-код для последующей вставки?

Question

[r_g_b_a]

Есть необходимость сохранить html-код в переменную, модифицировать его, а потом по нажатию кнопки вставлять неограниченное количество раз. Пытался сделать это с помощью jquery-метода .clone(), но я не совсем понимаю как он работает, и больше одного раза код не вставляется demo.
Я знаю, что можно при каждом нажатии кнопки вызывать мою функцию createTemplate и все сработает, но это бессмысленная работа для компьютера, так как с первого вызова клонируемый элемент меняться не будет.

Answer 1

[coderisimo]

А зачем экзотический метод one в вашем коде? :)
Вот это в одну строчку работает, как надо. Только добавьте шаблону Id, вместо класса.

$('button').on('click', function(){
		$('.container').append($('#html-to-copy').clone().addClass('modify'));
});

Поясню для большей ясности. Ф-ция appendTo (как и append ) ПЕРЕМЕЩАЕТ элемент. В вашем коде с one вы единожды клонируете элемент и помещаете его в переменную, чтобы использовать потом много раз, но это ошибка. Если хотите много templateS , то клонируйте их каждый раз. В противном случае вы имеете только ОДИН клон, соотвествнно толпу овечек Долли так не получить :) .

Comments

[r_g_b_a]

А зачем экзотический метод one в вашем коде? :)

Чтобы вызывать функцию только один раз и только после нажатия на кнопку, до этого результат ее выполнения не нужен.

Если хотите много templateS , то клонируйте их каждый раз.

Так в том и смысл - я хочу сделать так, чтобы элемент клонировался только один раз, потому что финальный результат каждый раз один и тот же.
То есть я хочу получить вот такой результат https://jsfiddle.net/copq608z/, но при этом чтобы код для переменной template брался с html-кода, плюс его нужно немного изменить перед вставкой.

[r_g_b_a]

https://jsfiddle.net/copq608z/1/
В таком виде все работает, но выглядит как говнокод

[coderisimo]

r_g_b_a,
чем вас не устраивает ?

$('button').on('click', function(){
    $('.container').append($('#html-to-copy').clone().addClass('modify'));
});

не экономьте на спичках.
С одной стороны

бессмысленная работа для компьютера

, с другой стороны используете селектор класса для шаблона. При том, что элемент один :). Ну, если вам так жалко компьютер и хотите создавать шаблон единожды, то можно вот так

var template;

function createTemplate() {
  template = $('#html-to-copy').clone().addClass('modify').html();
}

$('button')
	.one('click', createTemplate)
	.on('click', function(){
		$('.container').append(template);
})

[r_g_b_a]

не экономьте на спичках.

Дело не в экономии, хочу понять как это реализовать лучшим способом.

Ваш последний вариант мне нравится, спасибо!

[coderisimo]

r_g_b_a, ))) удачи. Посмотрите в строну инструментов вроде vue.js .Там шаблоны из коробки.