使用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中的,取用的时候都是将其中的内容复制一份使用,而不会直接使用模板中的内容