JQuery应用技巧：如何定义 HTML 模板并使用 JQuery 进行加载
作者：互联网
在开发中，我们可能需要定义一个 HTML 模板并使用 jQuery 将其附加到我们的 HTML 文档中。具体如何做呢？今天我们一起来看看html模板的定义以及使用Jquery进行加载。
使用 jQuery 追加方法
我们可以使用带有脚本标签的 jQuery下的append方法，将其type设置为不可识别的类型来添加模板。
为此，我们可以这样写：
<script id="hidden-template" type="text/x-custom-template"> <tr> <td>Foo</td> <td>Bar</td> <tr> </script><table id='targetTable'></table>
然后我们可以写：
const template = $('#hidden-template').html();
$('#targetTable').append(template);
将script标记中的 HTML 添加到table元素中。
由于type设置为text/x-custom-template会导致浏览器无法识别，因此不会被它解析。
我们使用html方法获取 script 标签的 HTML 内容。
然后我们可以使用append附加 HTML 内容。
模板字符串
另一种方法就是将 HTML 添加到 DOM 的方法是使用模板字符串。
例如，我们可以这样写：
<div class='list-items'></div>
然后如下：
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: 'https://i.picsum.photos/id/1/200/300.jpg?hmac=jH5bDkLr6Tgy3oAg5khKCHeunZMHq0ehBZr6vGifPLY', 标题: 'Foo item' },
{ url: '/bar', img: 'https://i.picsum.photos/id/1/200/300.jpg?hmac=jH5bDkLr6Tgy3oAg5khKCHeunZMHq0ehBZr6vGifPLY', title: 'Bar item' } ,
].map(Item).join(''));
我们有一个Item函数，它接受一个具有 、 和 属性的对象，url并将img的title属性放入它返回的模板字符串中。
然后我们用 with 获取 div $(‘.list-items’)，然后调用html一个数组对象，并通过调用with将它们映射到带有a元素的字符串。mapItem
然后我们调用join将它们连接在一起。
现在我们会看到页面上显示的项目。
结论
append我们可以使用带有脚本标签的 jQuery方法，将其type设置为不可识别的类型来添加模板。
另一种将 HTML 添加到 DOM 的方法是使用模板字符串。