1

我正在阅读“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。有人可以帮我处理这个订单吗？

问候， 阿图尔

4

3 回答 3

1

importNode应该调用 on document，而不是文档中的元素。

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

来自MDN：

Document方法从另一个文档创建指定节点或 DocumentFragment的importNode()新副本，以便可以将其插入到当前 Document 中。它尚未包含在文档树中；为此，您需要调用诸如 appendChild()or之类的方法insertBefore()。

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

于 2017-12-20T22:29:53.120 回答
1

你在这里有一个错误：

var node = tplContent.importNode(true);

tpl没有这个功能importNode()

如果你想使用importNode：

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


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

于 2017-12-20T22:29:53.783 回答
0

或者，您可以使用'scloneNode()上的方法。<template>content

var tplContent = document.getElementById("tpl").content;
var node = tplContent.cloneNode(true);
于 2017-12-23T17:22:27.420 回答