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

Embed once declared html content at muliple places within a page

本文关键字：一次 html 声明 内容 位置      更新时间：2023-09-26

我希望在许多地方使用/嵌入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可以做到。怎么做？

  1. 我真的建议你看看Handlebars（js框架）。简而言之，它是一个js模板框架。http://handlebarsjs.com/

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

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

如果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模板系统或像Backbone.js这样的Javascript MVC框架http://documentcloud.github.com/backbone/

我能看到的最好的选项是使用javascript。您可以使用JQuery来简化语法。只需在一个变量中定义这个可重用标记，并通过设置left和rightdiv的innerHtml将其插入到文档就绪事件的各个位置。

$(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"));
});
相关文章：