是否可以使用JavaScript编辑<script type ="text/template">的内容？

Question

这是我正在尝试编辑的示例:

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

我想补充一下:class="title"到h3标签.这是通过chrome扩展来完成的,因此我无法控制呈现的HTML.

这里有一点需要注意:我不能假设模板总是一样的,所以我不能只替换或编辑整个模板.我需要能够在文本中选择某些元素,并且只根据需要添加内容.

我遇到的问题是模板似乎只是纯文本.所以我不能用类似的东西选择它#login-popup #cover-msg.如果我错了,请纠正我.

是否可以使用JavaScript/jQuery执行此操作？

Answer 1

您可以遵循这种类型的过程,该过程从脚本标记中获取文本,将其插入到DOM元素中,以便您可以对其使用DOM操作,然后从该DOM元素中获取生成的HTML.这允许您自己避免任何手动解析HTML文本:

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

它遵循这个过程:

1. 从脚本标记获取innerHTML
2. 创建一个临时div
3. 将HTML放入临时div中,然后将其视为DOM元素
4. 使用DOM查询,找到 <h3>
5. 将类添加到它
6. 从临时div中取出HTML
7. 将HTML作为模板的修改版本放回脚本标记中.

它适用于:http://jsfiddle.net/jfriend00/mqnf1mmp/.