cloneNode对innerHTML

Question

我试图使用Node.cloneNode()克隆一个标头中的模板，但没有成功。这是我的标记

​

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);