HTML5 template模板元素实例页面

回到相关文章 »

代码：

CSS代码：
template { display: block; height: 300px; background-color: #eee; }
HTML代码：
<template id="template">
    <p>如果你看得见我和下面的图片，说明不支持template元素。</p>
    <p><img src="//image.zhangxinxu.com/image/study/s/s256/mm1.jpg"></p>
</template>
<div id="result" class="result"></div>
JS代码：
var template = document.getElementById("template");
var result = 'var template = document.getElementById("template");';
if (template) {
    if (template.innerHTML) {
        result += '<p>template元素可以通过选择器捕获。</p>';
        if (template.childNodes.length) {
            result += '<p>template被当成了普通元素。</p>';
        } else {
            result += '<p>template支持，且innerHTML是：<xmp>'+ template.innerHTML +'</xmp></p>';
            var image = template.content.querySelectorAll("img")[0];
            if (image) result += '通过template.content + querySelector(All)获取子元素';
        }
    } else {
        result += '<p>template是未知元素。</p>';
    }
} else {
    result += '<p>template元素不存在。</p>';
}
document.getElementById("result").innerHTML = result;

效果：