Uncaught TypeError: tplContent.importNode is not a function

Question

Uncaught TypeError: tplContent.importNode is not a function

389 Views Asked by justcasper At 04 April 2025 at 07:39

i'm reading the book "Web Components mit Polymer" and tried the following Code from the Book:

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

But i just get stopped in the second JS line with the error:

Uncaught TypeError: tplContent.importNode is not a function

I use Google Chrome version 63.0.3239.84 on Ubuntu. Can someone help me with this oder?

Regards, Artur

Original Q&A

There are 3 best solutions below

**Scott Marcus** · Answer 1

importNode should be called on document, not an element in the 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>

From MDN:

The Document method importNode() creates a new copy of the specified Node or DocumentFragment from another document so that it can be inserted into the current Document. It is not yet included in the document tree; to do that, you need to call a method such as appendChild() or insertBefore().

Additional information on using <template> and document.importNode() here.

**edkeveked** · Answer 2

You have an error here:

var node = tplContent.importNode(true);

tpl does not have the function importNode()

If you want to use 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>

**Supersharp** · Answer 3

Supersharp On 23 December 2017 at 17:22

Alternatly you can use the cloneNode() method on <template>'s content.

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

Uncaught TypeError: tplContent.importNode is not a function

There are 3 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in WEB-COMPONENT

Related Questions in HTML5-TEMPLATE

Related Questions in HTML-IMPORTS

Trending Questions

Popular # Hahtags

Popular Questions