jquery - Is it possible to edit the contents of a <script type="texttemplate"> with JavaScript?

admin管理员组

文章数量:1419611

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?

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?

• javascript
• jquery
• html

Share Improve this question Follow edited Jul 23, 2015 at 22:26 albert 8,15333 gold badges4848 silver badges6464 bronze badges asked Jul 23, 2015 at 22:01 JustinJustin 2,33444 gold badges1717 silver badges2323 bronze badges 4

• $("#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 Commented Jul 23, 2015 at 22:04
• 2 @BryanMudge The tag isn't rendered as a part of the DOM because it's in a script tag. – Etheryte Commented Jul 23, 2015 at 22:05
• 2 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 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 Commented Jul 23, 2015 at 22:11

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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:

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

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

本文标签：