Question

我正在阅读“Web Components mit Polymer”一书，并尝试了本书中的以下代码：

<!doctype html>
<html>
<body>
<template id="tpl">
    <h1 class="title"></h1>
    <div class="body"></div>
</template>
<script>
    var tplContent = document.getElementById("tpl").content;
    var node = tplContent.importNode(true);
    node.querySelector("h1").textContent = "Hallo Welt";
    node.querySelector("div").textContent = "Ich komme aus einem Template";
    document.body.appendChild(node);
</script>
</body>
</html>

但我只是在第二个JS系列中停止了错误：

未捕获的TypeError：tplContent.importNode不是函数

我在Ubuntu上使用Google Chrome版本63.0.3239.84。有人可以用这个奥德帮助我吗？

此致阿图尔

Answer 1

应该在importNode上调用

document，而不是文档中的元素。

＆＃13;

<!doctype html>
<html>
<body>
<template id="tpl">
    <h1 class="title"></h1>
    <div class="body"></div>
</template>
<script>
    var tplContent = document.getElementById("tpl").content;

    // importNode is a method of document:
    var node = document.importNode(tplContent, true);

    node.querySelector("h1").textContent = "Hallo Welt";
    node.querySelector("div").textContent = "Ich komme aus einem Template";
    document.body.appendChild(node);
</script>
</body>
</html>

＆＃13;

来自 MDN ：

文档方法importNode()创建指定的新副本来自另一个文档的Node或DocumentFragment，以便它可以插入当前文档。它尚未包括在内文件树;要做到这一点，你需要调用一个方法，如 appendChild()或insertBefore()。

有关使用<template>和document.importNode() here 的其他信息。

Answer 2

您在此处有错误：

var node = tplContent.importNode(true);

tpl没有importNode()

功能

如果您想使用importNode：

var node = document.importNode(tplContent, true);

＆＃13;

<!doctype html>
<html>
<body>
<template id="tpl">
    <h1 class="title"></h1>
    <div class="body"></div>
</template>
<script>
    var tplContent = document.getElementById("tpl").content;
    var node = document.importNode(tplContent, true);
    node.querySelector("h1").textContent = "Hallo Welt";
    node.querySelector("div").textContent = "Ich komme aus einem Template";
    document.body.appendChild(node);
</script>
</body>
</html>

＆＃13;

Answer 3

另外，您可以使用<template> content上的cloneNode()方法。

var tplContent = document.getElementById("tpl").content;
var node = tplContent.cloneNode(true);

未捕获的TypeError：tplContent.importNode不是函数

3 个答案: