Search code examples
javascripthtmlimporthtml-importshtml5-template

Why isn't importNode executing when everything is fine?

I want to use HTML import so I created two files.
File1:

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            height: 300px;
            width: 300px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

File2:

<!DOCTYPE html>
<html>
<head>
    <link rel='import' href='test.html' id='LINK'>
    <script>
        var LINK = document.getElementById('LINK');
        var test = LINK.import;
        var content = document.importNode(test.content, true);
        document.body.appendChild(content);

    </script>
</head>
<body>        
</body>
</html>

I should see a yellow square when I execute File2 but instead I'm getting this error:

Uncaught TypeError: Failed to execute 'importNode' on 'Document': parameter 1 is not of type 'Node'. at Import.html:8

When I log the "test" variable to the console, I am getting the document that contains File1 so it's fine there. I just don't get what the error is supposed to mean and why it's not working.

Solution

  • When you write:

    var content = document.importNode(test.content, true);

    ...you suppose that test is a <template> element.

    So in the document you import, you should have a <template> element.

    test.html:

    <html>
<head>
    <style>
        div {
            height: 300px;
            width: 300px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <template><div></div></template>
</body>
</html>

    In the main file, use querySelector() (or another selector function) to get the template:

    var LINK = document.getElementById('LINK');
var test = LINK.import.querySelector('template');
var content = document.importNode(test.content, true);
...