javascript - cloneNode 与 innerHTML

Question

我正在尝试使用 Node.cloneNode() 在 header 中克隆一个模板没有成功。这是我的标记

var header = document.querySelector("header"),
$templateHeader = document.querySelector("[data-template=header]");

header.innerHTML = $templateHeader.innerHTML;

<header></header>

<!--templates-->
<template data-template=header>
  <div class=container>
    <menu class=row>
      <li><a>Home</a></li>
      <li><a>items</a></li>
      <li><a>Reseller</a></li>
      <li><a>Shop</a></li>
    </menu>
  </div>
</template>

这很好用

header.innerHTML = $templateHeader.innerHTML;

虽然这行不通

var header = document.querySelector("header"),
$templateHeader = document.querySelector("[data-template=header]");

header.innerHTML = $templateHeader.cloneNode(true);

<header></header>

<!--templates-->
<template data-template=header>
  <div class=container>
    <menu class=row>
      <li><a>Home</a></li>
      <li><a>items</a></li>
      <li><a>Reseller</a></li>
      <li><a>Shop</a></li>
    </menu>
  </div>
</template>

连这个

var header = document.querySelector("header"),
$templateHeader = document.querySelector("[data-template=header]");

header.appendChild($templateHeader.cloneNode(true));

<header></header>

<!--templates-->
<template data-template=header>
  <div class=container>
    <menu class=row>
      <li><a>Home</a></li>
      <li><a>items</a></li>
      <li><a>Reseller</a></li>
      <li><a>Shop</a></li>
    </menu>
  </div>
</template>

当我 console.log $templateHeader.cloneNode(true) 这就是我得到的

谁能帮助我理解我在这里做错了什么？

注意: 我不想使用 jquery

问候，坦博

Answer 1

您已经克隆了整个模板并试图将模板附加到您的页眉中。你不想那样做，你想附加模板的内容。

var header = document.querySelector("header"),
$templateHeader = document.querySelector("[data-template=header]");

header.appendChild($templateHeader.content.cloneNode(true));

<header></header>

<!--templates-->
<template data-template=header>
  <div class=container>
    <menu class=row>
      <li><a>Home</a></li>
      <li><a>items</a></li>
      <li><a>Reseller</a></li>
      <li><a>Shop</a></li>
    </menu>
  </div>
</template>

也就是说，在我在网上找到的一些示例中，我发现使用了 importNode 而不是 cloneNode:

var clone = document.importNode(t.content, true);