cloneNode vs 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

问候，Tambo

Answer 1

您已克隆整个模板，并尝试将模板附加到标题中。您不想这样做，您想要附加模板的内容。

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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