將已聲明的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 /骨干網/