Javascript 无法从模板中获取内容

在Javascript中，我尝试动态创建一个HTML

元素，将

元素附加为其子元素，克隆模板的内容，然后将模板附加到文档体

问题是，当我访问模板的

content

属性时，它只返回

#document fragment

代码如下：

var temp = document.createElement('template');
var h1 = document.createElement('h1');
h1.textContent = 'hello';

var div = document.createElement('div').appendChild(h1)
temp.appendChild(div)

console.log('temp: ', temp)
console.log('temp content: ', temp.content)

var c = document.importNode(temp.content, true)
document.body.appendChild(c)

下面是

控制台.log的输出：


我做错了什么？为什么模板的内容显示为空？
注意，
var div=document.createElement（'div'）。appendChild（h1）
将
div
变量设置为
h1
，即附加的元素，而不是
div
元素；看

将
的
.innerHTML
设置为
.outerHTML
的
div
元素，调用
.appendChild（）
链接到
document.body
，参数为
temp.content


window.onload=function（）{
var temp=document.createElement（'template'）；
var h1=document.createElement（'h1'）；
h1.textContent='hello'；
var div=document.createElement（'div'）；
儿童组（h1）；
temp.innerHTML=div.outerHTML；
console.log（'temp:'，temp.content）；
文档正文附录子项（临时内容）；
}
创建
时，应该将DOM内容（使用
appendChild（）
）附加到
.content
属性（它是一个DocumentFragment），而不是元素本身


var temp=document.createElement（'template'）；
var h1=document.createElement（'h1'）；
h1.textContent='hello'；
var div=document.createElement（'div'）
子类附件（h1）
//将DOM追加到.content
临时内容追加子项（div）
console.log（'temp:'，temp）
console.log（'temp content:'，temp.content）
var c=document.importNode（temp.content，true）
document.body.appendChild（c）
div

被“剥离”，因为

appendChild

函数返回子元素（

h1

），而不是父元素（

div

）。@Titus ah ok。我以为我是在将子对象附加到

div

，然后返回

div

。谢谢你指出这一点。