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

Question

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

3

这是一个我正在尝试编辑的示例：

以下是我尝试编辑的示例：

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

我想在h3标签中添加： class ="title"。这是通过Chrome扩展程序完成的，因此我无法控制呈现的HTML。

这里有一个警告：我不能假设模板始终相同，因此我不能只是替换或编辑整个模板。我需要能够选择文本中的某些元素，并根据需要添加内容。

我的问题是模板似乎只是纯文本，所以我不能使用像#login-popup #cover-msg这样的东西来选择它。如果我错了，请纠正我。

是否可能使用JavaScript / jQuery实现这一点？

- Justin

$("#cover-msg").addClass('title')，你是想改变脚本的类型吗？我认为你可以用$("#login-popup").attr('type','text/sometemplatevariable')来实现。 - Bryan Mudge

2

@BryanMudge 标签没有作为 DOM 的一部分呈现，因为它在脚本标签中。 - Etheryte

2

你需要获取脚本块的 innerHTML，解析它，进行必要的操作，然后将结果设置为 innerHTML。 - Pointy

你可以使用类似于Trimpath，Handlebars等模板库将文本呈现为HTML，然后按照你的意愿进行操作。 - Stephen Thomas

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jfriend00 · Accepted Answer

您可以按照以下步骤获取脚本标签中的文本，将其插入到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;

它遵循以下过程：

从脚本标记中获取innerHTML
创建一个临时div
将HTML放入临时div中，您可以将其视为DOM元素
使用DOM查询，找到<h3>
添加类
从临时div中取回HTML
将HTML放回脚本标记中，作为模板的修改版本。

它在这里起作用：http://jsfiddle.net/jfriend00/mqnf1mmp/。