dom_dom0700_005

<template> 要素の template.( A ) は DocumentFragment を返す。中身を使い回すには template.content.( B ) で複製する。

解答

A: content
B: cloneNode(true)

解説

template.content は描画されないフラグメント。cloneNode(true) で中身込みの複製を作り、必要な場所へ差し込みます。

使用例(サンプルコード)

[ html ]

<template id="card">
  <div class="card"><h3></h3><p></p></div>
</template>
<div id="root"></div>
<script>
  const data = [{t:'Title1',d:'desc1'},{t:'Title2',d:'desc2'}];
  const root = document.getElementById('root');
  const tpl = document.getElementById('card');
  const frag = new DocumentFragment();
  data.forEach(x=>{
    const node = tpl.content.cloneNode(true);
    node.querySelector('h3').textContent = x.t;
    node.querySelector('p').textContent = x.d;
    frag.appendChild(node);
  });
  root.appendChild(frag);
</script>