Create element from template element?

Question

I'm having some trouble with this:

template = $("#template");
$(template).attr("id", "newid");

$(template).appendTo("body");

What I want to do is assign an id to the template, then amend the content. Trouble is, I am currently referring to the actual template element, and so the id is changing that. On using this template again, I cannot select as the id is different.

Any advice on optimal approach?

Not entirely sure what you what you mean? If you want to create an element from another, perhaps you want to use jQuery's `clone()` method? http://api.jquery.com/clone/. — Jack Franklin, Jul 09 '11 at 18:22

Ujjwal Manandhar · Accepted Answer · 2011-07-09T18:35:13.570

21

Clone the object:

template = $("#template").clone();
template.attr("id","newid");
template.appendTo("body");

edited Jul 09 '11 at 18:35

answered Jul 09 '11 at 18:24

Ujjwal Manandhar

2,194
16
20

2

but then it creates a new node of type ´template´. I just wanted its body. – Luís Soares Sep 15 '17 at 09:43
I think Manuel's version was what you were looking for. I also don't understand why would the template need to be cloned, but not its content. – access_granted Feb 14 '18 at 17:13

score 16 · Answer 2 · answered Aug 19 '14 at 08:26

The HTML5 provides a template element:

contents = $('#template').html();
copy = $('<div id="copy"></div>');
$('body').append(copy.append(contents));

The HTML part:

<html>
  <body>
    <template id='template'>
    </template>
  </body>
</html>

The clone method is not sufficient.

score 11 · Answer 3 · edited May 23 '17 at 10:31

11

Three more notes on your code:

You should use var when declaring variable
Consider prefixing variables storing jQuery objects with a dollar sign
After you assigned a jQuery object to your variable, you shouldn't do it again.

So your code will look like:

var $template = $("#template").clone();
$template.attr("id", "newid");

$template.appendTo("body");

edited May 23 '17 at 10:31

Community

1
1

answered Mar 20 '14 at 08:48

Paul Kozlovitch

786
7
12

3

Because creating jQuery object is a lot of work under the hood(you can take a look in jQuery source) and why do it again, if you already done it and store result in variable? And even if it wasn't so much work, even if it's only cache reading, simply referring what variable already stores is always faster than anything else. – Paul Kozlovitch Feb 02 '15 at 19:51

4javier · Answer 4 · 2019-02-23T12:11:15.533

8

For me clone() didn't work with <template>. Best answer was the one from Manuel, but to generate a JQuery object from template without adding an element as he did, I used this one-liner:

var template = $($("#template").html());

with this html

<html>
 <body>
  <template id='template'>
  </template>
 </body>
</html>

edited Feb 23 '19 at 12:11

answered Feb 20 '19 at 19:25

4javier

481
2
7
22

Tom Walters · Answer 5 · 2011-07-09T21:32:56.177

2

You can use the clone() method like so:

template = $('#template').clone();
template.attr('id', 'newid');
template.appendTo('body');

Look at http://api.jquery.com/clone/ for more info.

edited Jul 09 '11 at 21:32

answered Jul 09 '11 at 18:24

Tom Walters

15,366
7
57
74

`template` is already a jQuery object. Don't pass it again to jQuery. – Felix Kling Jul 09 '11 at 18:33

score 2 · Answer 6 · answered Jul 09 '11 at 18:37

2

The 3-lines solution will work, but I suggest the 1-line short jQuery style solution:

$('#template').clone().attr('id', 'newid').appendTo('body');

answered Jul 09 '11 at 18:37

Cokegod

8,256
10
29
47

1

That's great! Unfortunately, I'm making significant changes to the template in between cloning, and appending. – Damien Roche Jul 09 '11 at 18:41

Create element from template element?

6 Answers6