首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >嵌套HTML5 <template>标签

嵌套HTML5 <template>标签
EN

Stack Overflow用户
提问于 2015-09-11 12:02:31
回答 1查看 2.2K关注 0票数 1

HTML5 rocks确实说我可以嵌套模板。但当我使用它们时,就像下面这样,它们不会渲染。

<template id ='#outer'>
  <ul>
    <template = '#inner'>
      <li>Stuff</li>
    </template>
  </ul>
</template>

但是,下面的方法是可行的:

<template id ='#outer'>
  <p>hi</p>
    <template = '#inner'>
      <p>there</p>
    </template>
</template>
<div id="tDiv">

</div>      

    var outer = document.querySelector('#outer');
    var outerClone = outer.content.cloneNode(true);
    var check = outerClone.querySelector('template');
    var innerClone = check.content.cloneNode(true);
    var tDiv = document.querySelector('#temp');
    tDiv.appendChild(innerClone);

但通过这种方式,我可以使用innerCloneouterClone,并且我会得到一个hi或那里。不是你好。

我不能理解为什么模板是嵌套的而不是独立使用的真正目的。嵌套模板不会使事情变得复杂吗?

EN

回答 1

Stack Overflow用户

发布于 2020-12-28 02:54:15

为了在那里获得hi,你必须创建一个完整的克隆选择器树(即outerCloneinnerClone),并将其附加到可见的选择器(tDiv) (模板不可见)

<template id ='#outer'>
  <p>hi</p>
    <template id = '#inner'> // mind the *id* !!
      <p>there</p>
    </template>
</template>
<div id="tDiv">

</div>  

var outer = document.querySelector('#outer');
var outerClone = outer.content.cloneNode(true);
var check = outerClone.querySelector('#inner'); //mind #inner here
var innerClone = check.content.cloneNode(true);
outerClone.appendChild(innerClone);             //append inner to outer
var tDiv = document.querySelector('#temp');
tDiv.appendChild(outerClone);                   //append outer

下面是一个运行代码的jsfiddle

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/32515237

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档