使用template

1.放置html片段模板

<script id="tpl" type="text/html">

<p>$title</p><table id="datatable"></table>

<div class="descript"><p class="descripttitle"></p></div>

</script>

2.放置html片段模板

<template id="tpl">

<p>$title</p><table id="datatable"></table>

<div class="descript"><p class="descripttitle"></p></div>

</template>

js取出模板内容

　　

// 得到这个模板元素对象
let tpldom = document.querySelector('#tpl');
 
// 根据ID取出模板中的table元素
// 注意content这个属性,取templete内容需要使用这个只读属性
let tab = tpldom.content.querySelectorAll('#datatable');
 
// 然后可以操作这个table,比如向其中插入数据,然后显示在DOM中

用JQ取出模板内容

var html=$('#tpl').html();// 适用第二种,第一种取不到内容.

var html=$('#tpl').text();// 都适用

var html=tpl.innerHTML;//

var html=tpl.innerText;//

如此,取出的内容都是字符串.转成JQ对象

var htmlJQ=$(html);    // 是一堆DOM的集合,然后用选择器找里面的元素

htmlJQ.filter('p').eq(0);    // 取直接子元素的第一个p <p>$title</p>

htmlJQ.find('.descripttitle').eq(0);    // 取后代子元素的第一个p <p class="descripttitle"></p>

使用template时,用content取内容

var htmldom=$('#tpl').prop('content');// 这取出的是DOM片段,不再是字符串

var htmldom=tpl.content;

htmldom.querySelector('p');// 取出第一个p <p>$title</p>

如果使用JQ,与取字符串后转成JQ对象有区别

var htmlJQ=$(htmldom);    // 这里面是<template id="tpl">的JQ对象,不再是它里面的DOM集合

htmlJQ.children('p').eq(0);    // 取直接子元素的第一个p <p>$title</p>

htmlJQ.children().find('.descripttitle').eq(0);    // 取后代子元素的第一个p <p class="descripttitle"></p>

这里有个疑惑未解,取DOM片段转JQ后,里面是<template id="tpl">对象,如果使用htmlJQ.find()这个方法找它的后代元素,结果是空.使用上面的children则能找到.

3.动态生成模板元素

　　如果需要将已有的DOM文档暂时放到某个地方,可以使用这个模板元素.

　　例如页面上有个<div id="eName" class="name">...</div>,需要将它取出暂放到templete.

　　$('body').append('<templete id="tpl_eName"></templete>');// 建一个模板元素

　　$('#tpl_eName').append($('#eName'));// 向其中添加内容.

　　当动态向templete元素中添加内容时,使用JQ选择器可以选中模板内的元素.(直接写在文档中的模板元素则不会被选中).FF的F12工具看不到直接写的,但能看到动态生成的.谷歌工具都能看到.

　　如果只是希望将文档暂时放到一个"缓存"中,并且不希望被选中,那么就不能使用暂放到templete元素.可以使用document.createDocumentFragment()这个方法,建立文档片断,将需要缓存的DOM放到里面.

　　一般情况下,都是直接写好模板元素放在HTML中的,取用的时候都是将其中的内容复制一份使用,而不会直接使用模板中的内容