无法从模板中获取内容

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

创建function RefreshCalendar() { ClearEvents(); $('#calendar').fullCalendar('refetchEvents'); } function ClearEvents() { $('#calendar').fullCalendar('removeEvents'); } 时，您应该将DOM内容（带<template>）附加到appendChild()属性（这是一个DocumentFragment），而不是元素本身。

＆＃13;

＆＃13;

.content

＆＃13;

＆＃13;

＆＃13;

另一种方法是通过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)属性添加HTML字符串。

innerHTML

Answer 2

注意，var div = document.createElement('div').appendChild(h1)将div变量设置为h1，附加元素，而不是div元素;见What is the behavior of document.createElement when passed as an argument?。

将.innerHTML的{​​{1}}设置为<template>元素的.outerHTML，将div与.appendChild()绑定为document.body作为参数

＆＃13;

＆＃13;

temp.content

＆＃13;

window.onload = function() {

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

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

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

  document.body.appendChild(temp.content);

}

＆＃13;

＆＃13;

＆＃13;