本文主要是介绍JQuery应用技巧：如何定义 HTML 模板并使用 JQuery 进行加载-icode9专业技术文章分享，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

在开发中，我们可能需要定义一个 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 的方法是使用模板字符串。

标签：html,jquery,浏览器,cscript,函数,icode9,custom 来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

这篇关于JQuery应用技巧：如何定义 HTML 模板并使用 JQuery 进行加载-icode9专业技术文章分享的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！