Question

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

＆＃xA;＆＃xA;

 ＆lt; script id =“login-popup”type =“text / template” ＆GT; ＆＃XA; ＆lt; h3 id =“cover-msg”class =“modal-title”＆gt;您需要登录才能这样做。＆lt; / h3＆gt;`＆＃xA;＆lt; / script＆gt;＆＃xA;

＆＃xA;＆＃xA;

我想在h3标签中添加： class =“title”。这是通过chrome扩展来完成的，所以我无法控制渲染的HTML。

＆＃xA;＆＃xA;

这里有一点需要注意：我不能认为模板会一直存在是相同的，所以我不能只是替换或编辑整个事情。我需要能够在文本中选择某些元素，并且只根据需要添加内容。

＆＃xA;＆＃xA;

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

＆＃xA;＆＃xA;

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

＆＃XA;

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;

遵循这个过程：

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

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

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

1 个答案: