javascript - 无法从模板获取内容

Question

在 Javascript 中，我尝试动态创建 HTML <template>元素，附加 <h1>元素作为其子元素，克隆模板的内容，然后将模板附加到文档正文。

问题是当我访问 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)

这是 console.log's 的输出:

我在这里做错了什么？为什么模板的内容显示为空？

Answer 1

当您创建<template>时，您应该将 DOM 内容(使用 appendChild() )附加到 .content属性(它是一个 DocumentFragment)，而不是元素本身。

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

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

//append DOM to .content
temp.content.appendChild(div)

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

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

另一种方法是通过 innerHTML 添加 HTML 字符串。属性。

temp.innerHTML = '<div><h1>Hello</h1></div>'