javascript - 在页面内的多个位置嵌入一次声明的 html 内容

Question

我希望在很多地方使用/嵌入 html 内容(在本例中为列表 <ul> )，但在页面中仅声明一次。

例如，考虑内容:

<ul>
  <li>A</li>
  <li>B</li>
  <li>...</li>
  <li>X</li>
</ul>

现在这个内容需要在很多地方使用，如下所示:

使用1:

<div class='left'>
  <ul id='listA'>
    <li>A</li>
    <li>B</li>
    <li>...</li>
    <li>X</li>
  </ul>
</div

使用2:

<div class='right'>
  <ul id="listX">
    <li>A</li>
    <li>B</li>
    <li>...</li>
    <li>X</li>
  </ul>
</div>

我确信这可以在服务器端或通过客户端的 Ajax 调用来完成，但目标是优化/减少每个页面请求发送的 html 内容(数据字节)。因此，如果该特定内容出现在 n 中页面中的位置，它必须仅发送一次，然后在那里操纵到所有 n不同的地方。因此，在服务器端执行此操作没有意义，Ajax 会增加传输过载，因为它是一个单独的调用。

我假设 html/css 中没有任何东西可以这样做，甚至 iframe不能用于此目的。不过我确信 javascript/jQuery 可以做到这一点。怎么办？

Answer 1

1. 我真的建议你看看Handlebars(js框架)。简单来说，它是一个js模板框架。 http://handlebarsjs.com/

2. 在这种情况下，我建议您使用 requirejs 用 html 片段定义您的模块，然后每当您需要使用它时，您都可以 require 它并将模板编译成您想要的内容。

   <

3. 您还可以使用 jquery 或其他 js 库来更改 html 元素的属性，如 Philip Walton 所说。 $("ul").eq(0).removeClass("right").addClass("left")