Question

Html代码：

<body>

<template id="hello">
    <div>Hellow world!</div>
</template>
<script src="x.js"></script>
</body>

打字稿代码：

function greeter(person: string) {
    return "hello " + person
}

var user = "Jane"
var greetNode = document.createElement("p")
greetNode.innerHTML = greeter(user)
document.body.appendChild(greetNode)
var node = document.importNode(
    document.querySelector("#hello").firstChild, true
)
document.body.appendChild(node)

Chrome出错：

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

预期的行为是＆＃34;你好世界＆＃34; div应该添加到html正文中。

jsfiddle：

https://jsfiddle.net/kindlychung/4o2fwwfb/

有什么建议吗？

Answer 1

template标记内的内容未呈现，实际上并不在文档中。第document.querySelector("#hello").firstChild行返回null，因此错误。

要访问模板的内部HTML，您可以使用其content属性。 Here您可以阅读以下内容：

还有一个内容属性，它是只读的，可以访问模板的内容。

所以代码是：

function greeter(person: string) {
    return "hello " + person
}

var user = "Jane"
var greetNode = document.createElement("p")
greetNode.innerHTML = greeter(user)
document.body.appendChild(greetNode)

var template = document.querySelector("#hello")
var div = template.content.querySelector("div")

var node = document.importNode(div, true)
document.body.appendChild(node)

为什么在类型正确时会出现类型错误？

1 个答案: