javascript - 是否可以使用 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/ .