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

我希望在许多地方使用/嵌入html内容（在本例中是一个列表），但在一个页面中只声明一次

例如，考虑内容：

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

A
B

X

现在，此内容需要在以下许多地方使用：

使用1：

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

A
B

X

我能看到的最好的选择是使用javascript。您可以使用JQuery来实现简单的语法。只需在一个变量中定义此可重用标记，并通过设置
left
和
right
div的innerHtml将其插入document ready事件的各个位置

$(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"));
});

$（文档）.ready（函数（）{
var reusablehtml=“
A
B
。
X
”；
$（“#左”）.html（reusablehtml.replace（“namepholder”，“listA”））；
$（“#右”）.html（可重用的html.replace（“namepholder”、“listX”）；
});
我能看到的最佳选择是使用javascript。您可以使用JQuery来实现简单的语法。只需在一个变量中定义此可重用标记，并通过设置
left
和
right
div的innerHtml将其插入document ready事件的各个位置

$(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"));
});

$（文档）.ready（函数（）{
var reusablehtml=“
A
B
。
X
”；
$（“#左”）.html（reusablehtml.replace（“namepholder”，“listA”））；
$（“#右”）.html（可重用的html.replace（“namepholder”、“listX”）；
});

我真的建议您看看Handlebar（js框架）。简而言之，它是一个js模板框架

在本例中，我建议您使用requirejs用html片段定义您的模块，然后在需要使用它时，您可以根据需要使用它并将模板编译成您想要的内容

正如Philip Walton所说，您还可以使用jquery或其他js库来更改html元素的属性。
$（“ul”）.eq（0）.removeClass（“右”）.addClass（“左”）

我真的建议您看看Handlebar（js框架）。简而言之，它是一个js模板框架

在本例中，我建议您使用requirejs用html片段定义您的模块，然后在需要使用它时，您可以根据需要使用它并将模板编译成您想要的内容

正如Philip Walton所说，您还可以使用jquery或其他js库来更改html元素的属性。
$（“ul”）.eq（0）.removeClass（“右”）.addClass（“左”）

如果HTML已经在页面的某个地方，您可以在jQuery中复制它，更改需要更改的内容，然后将其插入其他地方

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

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')));

var originalUL=$（“ul”）；
$（“body”）.append（$（''）.append（originalUL.clone（）.attr（'id'，'listA'））；
$（“body”）.append（$（''）.append（originalUL.clone（）.attr（'id'，'listB'））；

下面是一个例子：

但是，如果您要经常这样做，并且每个实例的更改都很复杂，我会考虑使用Javascript模板系统或Javascript MVC框架，如Backbone.js
如果HTML已经在页面的某个地方，您可以在jQuery中复制它，更改需要更改的内容，然后将其插入其他地方

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

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')));

var originalUL=$（“ul”）；
$（“body”）.append（$（''）.append（originalUL.clone（）.attr（'id'，'listA'））；
$（“body”）.append（$（''）.append（originalUL.clone（）.attr（'id'，'listB'））；

下面是一个例子：

但是，如果您要经常这样做，并且每个实例的更改都很复杂，我会考虑使用Javascript模板系统或Javascript MVC框架，如Backbone.js
每个副本的内容是否完全相同？每个副本的内容是否完全相同？我相信在将html内容插入
左侧
和
右侧
div之前，我必须通过为各种元素插入
id
和
类
（
和
）来准备html。您还可以使用一个类名而不是多个id，这将使其更易于维护。@LEOPiC:
id
只是为了演示内容在不同位置可能具有不同的布局和标识。即使我使用
class
，它也会有不同的值呈现给不同的布局。我相信在
left
和
right
div中插入html内容之前，我必须通过为各种元素插入
id
和
class
来准备html（
和
）。您还可以使用一个类名而不是多个id，这将使其更易于维护。@LEOPiC:
id
只是为了演示内容在不同位置可能具有不同的布局和标识。即使我使用
类
，它也会有不同的值呈现给不同的布局。