将已声明的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片段定义模块，然后每当需要使用它时，都可以要求它并将模板编译为所需的模板。

3. 您也可以使用jQuery或其他js lib来更改html元素的属性，如Philip Walton所说。 $（ “UL”）。EQ（0）.removeClass（ “右”）。addClass（ “左”）

Answer 2

我能看到的最好的选择是使用javascript。 您可以使用JQuery简化语法。 就在一个变量定义这个可重复使用的标记，并在对文档准备事件不同的地方通过设置的innerHTML的插入left和right的div。

$(document).ready(function() {
   var reusablehtml ="<ul id='nameplaceholder'><li>A</li><li>B</li><li>...</li><li>X</li></ul>";
   $("#left").html(reusablehtml.replace("nameplaceholder", "listA"));
   $("#right").html(reusablehtml.replace("nameplaceholder", "listX"));
});

Answer 3

如果HTML已在页面上的某个位置，则可以将其复制到jQuery中，更改需要更改的内容，然后将其插入其他位置。

例如，如果页面上唯一的内容是<ul> ，则可以执行以下操作：

var originalUL = $("ul");

$("body").append($('<div class="left" />').append(originalUL.clone().attr('id', 'listA')));

$("body").append($('<div class="right" />').append(originalUL.clone().attr('id', 'listB')));

这是一个示例： http : //jsfiddle.net/uU7cV/

但是，如果您要执行很多操作，并且每个实例的更改都很复杂，那么我会考虑使用Javascript模板系统或Javascript MVC框架（例如Backbone.js http：//documentcloud.github）。 COM /骨干网/