使用template

Posted 2020-10-09 MirrorSpace

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>

用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则能找到.