Javascript 如何创建可重用的HTML字符串对象？

如何为HTML网页创建可重用字符串

我希望以下一行HTML可以作为一个小字符串“对象”在我的整个网页中重用：

[<span class="sgreentxt">root</span>@<span class="sbluetxt">localhost</span> <span class="sorangetxt">~ </span>]

[root@localhost ~ ]

那将是“[root@localhost由webrowser解释并显示在屏幕上的“~]”

---

此对象将等效于“cli=[root@localhost因此，我不需要输入这么长的代码字符串，只需要输入“cli”之类的内容，html就会将其识别为javascript字符串打印行或其他内容，并输出另一个代码，该代码将被解释为html并适当显示。我如何才能做到这一点，并能够通过同一网页多次做到这一点。注意：document.getElementById（）在每个网页上只工作一次。

有很多很棒的客户端模板库。我个人喜欢。在我看来，这更像是服务器端的事情。您可能希望服务器为您执行此操作。如果你真的想在客户端做这件事，而不关心它们可能是SEO影响和FOUSC工件，并且一个合适的模板库太多了，那么你可以这样做

var模板=”[root@localhost ~ ]";
var targets=Array.from（document.querySelectorAll（“[data replace='cli']”）；
forEach（函数（target）{target.outerHTML=template；}）