html展开模板,html5template模板的介绍
页⾯中的模板
在没有template模板的时候，我们想要页⾯中添加⼀些模板内容，是使⽤⽤来承载模板内容。
⽽做H5隆重推出了template模板元素中，template就成了我们实现页⾯中模板的⾸选实现⽅式。
....
对于script承载的template的操作要通过innerHTML来操作var ElementById("popUserReg");
$("#pwin").innerHTML=pop.innerHTML;
html5 template模板的使⽤
数据加载完成!
template的作⽤相当于iframe类似，另建了⼀个document根元素，iframe要通过tWindow.document获取根元素，⽽template则通过t来获取根元素。⽽且te
mplate中的内容虽然不展⽰，但是它确确实实是浏览器⽣成了dom树，并且进⾏了语法检查。var ElementById("poptip");
html网页免费模板$("#pwin").t);
然⽽IE浏览器对template模板不⽀持，中IE下上⾯的代码会如下
IE不是别template标签，当作普通标签给显⽰出来了。所以⽬前template要想使⽤得不考虑IE浏览器，或者是在移动端的时候进⾏使⽤。
在移动端使⽤template的好处还有⼀个，就是我们可以把多个模板放置到⼀个template，然后通过dom api获取需要的模板元素。
从chrome的dom结构中查看template的结构，其根元素时#document-fragment，也就是template另创了⼀个document空间。
数据加载完成!
var ElementById("poptip");
var t.querySelector("i");
document.body.appendChild(icopy);
我们单纯的把标签给添加到容器中，效果如下：
但是这样做，有⼀个问题
模板中的标签不见了，因为它已经被添加到body中了。这个时候我们就需要使⽤元素的clone来复制了，但是模板中的元素是在另⼀个document中，所以我们要使⽤document.importNode⽅法来进⾏跨document元素复制，document.importNode中IE9+浏览器就能⽀持了。
var ElementById("poptip");
var t.querySelector("i");
var icopy=document.importNode(icon,true);
document.body.appendChild(icopy);
这样复制<
i>标签添加到body中，template的原来的标签就不会受影响了。
template有template的灵活，script template有script的强⼤，到底是⽤哪个，根据你⾃⼰喜好，和实际需求进⾏选择。没有绝对的哪个好，哪个差。我就⽐较喜欢使⽤script template，因为⼤多情况下，我们对于模板的操作也只是获取其innerHTML⽽已，不需要过多的操作，并且script模板⽀持IE浏览器。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。