我有一个我正在循环的数组。每次条件为真时，我都想将HTML以下代码的副本附加到具有某些值的容器元素。
我可以把这个 HTML 放在哪里以聪明的方式重用？
<a href="#" class="list-group-item">
<div class="image">
<img src="" />
</div>
<p class="list-group-item-text"></p>
</a>
查询
$('.search').keyup(function() {
$('.list-items').html(null);
$.each(items, function(index) {
// APPENDING CODE HERE
});
});
老问题，但由于问题询问“使用 jQuery”，我想我会提供一个选项，让您可以在不引入任何供应商依赖性的情况下执行此操作。
尽管有很多模板引擎，但它们的许多功能最近都不太受欢迎，迭代 ( <% for)、条件 ( <% if) 和转换 ( <%= myString | uppercase %>) 充其量被视为微语言，而最糟糕的是反模式。现代模板实践鼓励简单地将对象映射到它的 DOM（或其他）表示，例如我们看到的映射到 ReactJS 组件（尤其是无状态组件）的属性。
将模板的 HTML 保持在 HTML 的其余部分旁边的一个属性是使用非执行的<script> type，例如<script type="text/template">. 对于您的情况：
<script type="text/template" data-template="listitem">
<a href="${url}" class="list-group-item">
<table>
<tr>
<td><img src="${img}"></td>
<td><p class="list-group-item-text">${title}</p></td>
</tr>
</table>
</a>
</script>
在文档加载时，阅读您的模板并使用简单的标记对其进行标记 String#split
var itemTpl = $('script[data-template="listitem"]').text().split(/\$\{(.+?)\}/g);
请注意，使用我们的令牌，您以交替[text, property, text, property]格式获得它。这让我们可以使用Array#map, 和映射函数很好地映射它：
function render(props) {
return function(tok, i) { return (i % 2) ? props[tok] : tok; };
}
哪里props会像{ url: 'http://foo.com', img: '/images/bar.png', title: 'Lorem Ipsum' }。
假设您已经itemTpl按照上述方式解析和加载了所有内容，并且您items在范围内有一个数组：
$('.search').keyup(function () {
$('.list-items').append(items.map(function (item) {
return itemTpl.map(render(item)).join('');
}));
});
这种方法也只是勉强使用 jQuery - 您应该能够使用带有document.querySelector和 的vanilla javascript 来采用相同的方法.innerHTML。
要问自己的一个问题是：您真的想要/需要将模板定义为 HTML 文件吗？您始终可以组件化 + 重用模板，就像重用大多数要重复的东西一样：使用函数。
在 es7-land 中，使用解构、模板字符串和箭头函数，您可以编写非常漂亮的组件函数，这些函数可以使用上述$.fn.html方法轻松加载。
const Item = ({ url, img, title }) => `
<a href="${url}" class="list-group-item">
<div class="image">
<img src="${img}" />
</div>
<p class="list-group-item-text">${title}</p>
</a>
`;
然后你可以轻松地渲染它，甚至从一个数组映射，像这样：
$('.list-items').html([
{ url: '/foo', img: 'foo.png', title: 'Foo item' },
{ url: '/bar', img: 'bar.png', title: 'Bar item' },
].map(Item).join(''));
哦还有最后一点：不要忘记清理传递给模板的属性，如果它们是从数据库中读取的，或者有人可以从您的页面传入 HTML（然后运行脚本等）。
您可以决定在您的项目中使用模板引擎，例如：
如果您不想包含另一个库，John Resig 提供了一个jQuery 解决方案，类似于下面的解决方案。
浏览器和屏幕阅读器会忽略无法识别的脚本类型：
<script id="hidden-template" type="text/x-custom-template">
<tr>
<td>Foo</td>
<td>Bar</td>
<tr>
</script>
使用 jQuery，基于模板添加行将类似于：
var template = $('#hidden-template').html();
$('button.addRow').click(function() {
$('#targetTable').append(template);
});
由于接受的答案将代表重载脚本方法，我想建议另一种方法，在我看来，由于重载脚本带来的 XSS 风险，它更干净、更安全。
我做了一个演示来向你展示如何在一个动作中使用它，以及如何将一个模板注入另一个模板，编辑然后添加到文档 DOM。
<template id="mytemplate">
<style>
.image{
width: 100%;
height: auto;
}
</style>
<a href="#" class="list-group-item">
<div class="image">
<img src="" />
</div>
<p class="list-group-item-text"></p>
</a>
</template>
// select
var t = document.querySelector('#mytemplate');
// set
t.content.querySelector('img').src = 'demo.png';
t.content.querySelector('p').textContent= 'demo text';
// add to document DOM
var clone = document.importNode(t.content, true); // where true means deep copy
document.body.appendChild(clone);
+它的内容在被激活之前实际上是惰性的。本质上，您的标记是隐藏的 DOM，不会呈现。
+模板中的任何内容都不会产生副作用。脚本不运行，图像不加载，音频不播放......直到使用模板。
+内容被认为不在文档中。在主页中使用document.getElementById()或querySelector()不会返回模板的子节点。
+模板可以在任何地方内的放置<head>，<body>或<frameset>与可以包含任何类型的被允许在这些元素的含量。请注意，“任何地方”意味着<template>可以安全地用于 HTML 解析器不允许的地方。
浏览器支持应该不是问题，但如果您想涵盖所有可能性，您可以轻松检查：
要功能检测
<template>，请创建 DOM 元素并检查 .content 属性是否存在：
function supportsTemplate() {
return 'content' in document.createElement('template');
}
if (supportsTemplate()) {
// Good to go!
} else {
// Use old templating techniques or libraries.
}
<script>标签display:none默认有。"text/javascript"..innerHTML. 用户提供的数据的运行时字符串解析很容易导致 XSS 漏洞。全文：https : //www.html5rocks.com/en/tutorials/webcomponents/template/#toc-old
有用的参考：https : //developer.mozilla.org/en-US/docs/Web/API/Document/importNode http://caniuse.com/#feat=queryselector
创建 Web 组件Trawersy Media 使用 HTML 模板创建自定义 Web 组件教程：https ://youtu.be/PCWaFLy3VUo
在正文中添加某处
<div class="hide">
<a href="#" class="list-group-item">
<table>
<tr>
<td><img src=""></td>
<td><p class="list-group-item-text"></p></td>
</tr>
</table>
</a>
</div>
然后创建css
.hide { display: none; }
并添加到您的 js
$('#output').append( $('.hide').html() );
为了解决这个问题，我认识到两种解决方案：
第一个与 AJAX 一起使用，您必须使用它从另一个文件加载模板，并在每次需要时添加.clone().
$.get('url/to/template', function(data) {
temp = data
$('.search').keyup(function() {
$('.list-items').html(null);
$.each(items, function(index) {
$(this).append(temp.clone())
});
});
});
考虑到应该在 ajax 完成后添加事件以确保数据可用！
第二个是直接将它添加到原始 html 的任何位置，选择它并在 jQuery 中隐藏它：
temp = $('.list_group_item').hide()
您可以在添加模板的新实例后使用
$('.search').keyup(function() {
$('.list-items').html(null);
$.each(items, function(index) {
$(this).append(temp.clone())
});
});
与上一个相同，但如果您不希望模板保留在那里，而只是在 javascript 中，我认为您可以使用（尚未测试！）.detach()而不是隐藏。
temp = $('.list_group_item').detach()
.detach() 从 DOM 中删除元素，同时保持数据和事件处于活动状态（.remove() 没有！）。