Is it possible to edit the contents of a <script type="text/template"> with JavaScript?

Question

Here's an example of what I'm trying to edit:

<script id="login-popup" type="text/template"> 
  <h3 id="cover-msg" class="modal-title">You need to login to do that.</h3>`
</script>

I would like to add: class="title" to the h3 tag. This is being done via a chrome extension, so I can't control the HTML that is rendered.

Here's the caveat: I can't assume that the template will always be the same, so I can't just replace or edit the entire thing. I need to be able to select certain elements within the text and only add things as needed.

The problem I'm having is that the template seems to just be plain text. So I can't select it with something like #login-popup #cover-msg. Please correct me if I'm wrong.

Is it possible to do this with JavaScript/jQuery?

$("#cover-msg").addClass('title'), or are you trying to change the type of the script? I think you can do $("#login-popup").attr('type','text/sometemplatevariable') — Bryan Mudge
– Bryan Mudge, Commented Jul 23, 2015 at 22:04
@BryanMudge The tag isn't rendered as a part of the DOM because it's in a script tag. — Etheryte
– Etheryte, Commented Jul 23, 2015 at 22:05
You'll have to get the innerHTML of the script block, parse it, do whatever you need to do, and then set the innerHTML from the result. — Pointy
– Pointy, Commented Jul 23, 2015 at 22:06
you could use a template library like trimpath, handlebars, etc. to render the text to html and then manipulate it as you wish — Stephen Thomas
– Stephen Thomas, Commented Jul 23, 2015 at 22:11

jfriend00 · Accepted Answer · 2015-07-23 22:24:26Z

7

You can follow this type of procedure which gets the text out of the script tag, inserts it into a DOM element so you can use DOM manipulation on it, then gets the resulting HTML out of that DOM element. This allows you to avoid any manual parsing of the HTML text yourself:

var t = document.getElementById("login-popup");
var div = document.createElement("div");
div.innerHTML = t.innerHTML;
$(div).find("h3").addClass("title");
t.innerHTML = div.innerHTML;

It follows this process:

Get the innerHTML from the script tag
Create a temporary div
Puts the HTML into the temporary div where you can then treat it as DOM elements
Using DOM query, find the <h3>
Adds the class to it
Get the HTML back out of the temporary div
Puts the HTML back into the script tag as the modified version of the template.

It works here: http://jsfiddle.net/jfriend00/mqnf1mmp/.

edited Jul 23, 2015 at 22:24

answered Jul 23, 2015 at 22:13

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

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

2 Comments

Smac Over a year ago

Works perfect, thanks. Just a quick question. Why does it not work when I do var t = $("#login-popup"); ?

jfriend00 Over a year ago

@Smac - When you do var t = $("#login-popup");, t is a jQuery object, not a DOM object so that would work only if you converted other methods in the code to jQuery methods.

Collectives™ on Stack Overflow

Is it possible to edit the contents of a <script type="text/template"> with JavaScript?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related