How do I create an HTML template that I can copy dynamically?

Question

What's the correct way to do the (pseudo) following:

<div id="myTemplate">
  <div id="child1"></div>
  <span id="child2"></span>
</div>


<script>
  var templateCopy = document.getElementById("myTemplate")
  var copy1 = document.createElementFromTemplate(templateCopy);
  document.appendChild(copy1);
</script>

TIA

I would look at a framework or library. jQuery has templates: api.jquery.com/category/plugins/templates — Jared Farrish
– Jared Farrish, Commented Sep 10, 2011 at 22:59
Why? Why not use a templating engine? What are you trying to accomplish? — beatgammit
– beatgammit, Commented Sep 10, 2011 at 23:00
templating engine? to perform a simple function? Seems like overkill. Anyway... I think cloneNode is the function I'm looking for... double checking now... — Yevgeny Simkin
– Yevgeny Simkin, Commented Sep 10, 2011 at 23:02
jsfiddle.net/WXgrM/1 this is an example that I found several days ago somewhere here. — Bakudan
– Bakudan, Commented Sep 10, 2011 at 23:04
You shouldn't use id's in a template. When it is copied, you'll have a duplicate id. — Joseph Marikle
– Joseph Marikle, Commented Sep 10, 2011 at 23:05

Leonid · Accepted Answer · 2011-09-10 23:01:58Z

3

var copy1 = templateCopy.cloneNode(true), beware - id will be copied too.

answered Sep 10, 2011 at 23:01

Leonid

3,18126 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yevgeny Simkin Over a year ago

yeah, that's what I'm looking for... thanks very much. I can change the id, I believe. I'm a little surprised how many jQuery answers I'm getting for something so straight forward... I have no use or need for jQuery. I'm performing a simple task, I don't want to load a giant framework to accomplish it!

NebulaFox · Accepted Answer · 2011-09-10 23:02:18Z

0

I know you can do it in jQuery http://api.jquery.com/clone/

answered Sep 10, 2011 at 23:02

NebulaFox

8,4229 gold badges52 silver badges67 bronze badges

Comments

coderman · Accepted Answer · 2011-09-10 23:02:26Z

0

Microsoft has contributed a jQuery by having jQuery Templates plugin. Hope this helps

https://github.com/jquery/jquery-tmpl

answered Sep 10, 2011 at 23:02

coderman

1,5152 gold badges16 silver badges16 bronze badges

Comments

Mikko Ohtamaa · Accepted Answer · 2011-09-10 23:03:05Z

0

jQuery templates do pretty much what you are asking. You can use

  $("elem").tmpl(output)

... And also have string substitutions too.

answered Sep 10, 2011 at 23:03

Mikko Ohtamaa

84.9k63 gold badges293 silver badges478 bronze badges

Collectives™ on Stack Overflow

How do I create an HTML template that I can copy dynamically?

4 Answers 4

1 Comment

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Related