Accessing text/template contents in javascript

Question

I'm trying to access the html contents of an script block with the type set to "text/template". I've heard of template engines using such tags, but my application is very simple and loading an entire engine is unnecessary. Can someone shed some light on how I select that element? I think jQuery's .html() function will get me the content but I can't seem to find the element.

The template looks like:

<script type="text/template" id="repeating-form-section-template">
  <div class="repeating-form-section">
    <label>Field Name:</field>
    <input type="text" value="default value" name="field_name" />
  </div>
</script>

Things I've tried:

getElementById('repeating-form-section-template');
$('script').filter(...);
$('#repeating-form-section-template');
$("script[type='text/template']");

Thanks!

Do you need help also with template tags. This is different as you need to process them first. — Oscar Godson
– Oscar Godson, Commented Jun 3, 2011 at 21:52
I seem to have no problem with this (click here for example). You are loading the text/template part before the jQuery and then your own script, right? One other slight issue might be the malformed HTML (<label>Field Name:</field>). — brymck
– brymck, Commented Jun 3, 2011 at 21:54
This is what Im guessing if its not getting the content at all. I updated my answer too. — Oscar Godson
– Oscar Godson, Commented Jun 3, 2011 at 21:58
I forgot to trigger the function after the load event; my mistake. Thanks for the help! — Spencer Alger
– Spencer Alger, Commented Jun 4, 2011 at 2:13

Niklas · Accepted Answer · 2011-06-03 21:50:09Z

3

Both:

 $('#repeating-form-section-template');
 $("script[type='text/template']");

Work fine. Make sure you check them after DOM load. Example: http://jsfiddle.net/niklasvh/VKqPX/

answered Jun 3, 2011 at 21:50

Niklas

30k5 gold badges54 silver badges74 bronze badges

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

1 Comment

Spencer Alger Over a year ago

Thanks, I was not loading the script after DOM load.

Oscar Godson · Accepted Answer · 2011-06-03 21:57:37Z

1

It should be this easy:

http://jsbin.com/evozi5/edit

For a preview: http://jsbin.com/evozi5/

The code tho is simply:

var someVar = $('#repeating-form-section-template').html();

$('#where-i-want-content').append(someVar);

Note

jQuery must be loaded before this will work tho. So:

<script src="jquery.js"></script>
<script> /* your code */ </script>
<script type="text/template"></script>

edited Jun 3, 2011 at 21:57

answered Jun 3, 2011 at 21:51

Oscar Godson

32.9k42 gold badges129 silver badges207 bronze badges

Comments

Jarvl · Accepted Answer · 2017-02-01 18:57:33Z

0

innerHTML is generally considered a bad thing to use, but it's the perfect thing to use here:

var template = document.getElementById("repeating-form-section-template").innerHTML;

document.getElementById('where-you-want-the-content').innerHTML = template;

edited Feb 1, 2017 at 18:57

Jarvl

678 bronze badges

answered Jun 3, 2011 at 21:58

AsherMaximum

9722 gold badges11 silver badges17 bronze badges

Collectives™ on Stack Overflow

Accessing text/template contents in javascript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related