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

【问题标题】：How can I create a reusable HTML string object?如何创建可重用的 HTML 字符串对象？
【发布时间】：2016-08-11 01:56:32
【问题描述】：

如何为我的 HTML 网页创建可重复使用的字符串？

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

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

这将是由网络浏览器解释并显示在屏幕上的“[root@localhost ~ ]”。

这个对象将等同于“cli = [root@localhost ~ ]”，因此我不必输入那么长的代码串，而只需输入“cli”之类的内容，html 就会将其识别为 javascript字符串 printline 或其他东西并输出其他代码，而不是将其解释为 html 并适当地显示。我怎样才能做到这一点，并能够通过同一个网页多次做到这一点。注意：document.getElementById() 每个网页只能使用一次。

【问题讨论】：

标签： javascript html css web

【解决方案1】：

那里有很棒的客户端模板库。我个人喜欢http://handlebarsjs.com/。在我看来，这更像是服务器端的事情。您可能希望您的服务器为您执行此操作。如果您真的想在客户端做这件事，并且不在乎他们的可能是 SEO 影响和 FOUSC 工件以及适当的模板库太多，那么您可能会做这样的事情。

var template = "[<span class=\"sgreentxt\">root</span>@<span class=\"sbluetxt\">localhost</span> <span class=\"sorangetxt\">~ </span>]";
var targets = Array.from(document.querySelectorAll("[data-replace='cli']"));
targets.forEach(function(target) { target.outerHTML = template; });

<ul>
  <li><span data-replace="cli"></span></li>
  <li><span data-replace="cli"></span></li>
  <li><span data-replace="cli"></span></li>
  <li><span data-replace="cli"></span></li>
</ul>

【讨论】：