2

在 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：

模板输出

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

4

2 回答 2

4

创建 时<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>'
于 2017-04-20T06:59:48.450 回答
0

注意，var div = document.createElement('div').appendChild(h1)将div变量设置h1为附加元素，而不是div元素；请参阅作为参数传递时 document.createElement 的行为是什么？.

元素的集合.innerHTML，调用链接到<template>作为参数。.outerHTMLdiv.appendChild()document.bodytemp.content

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);

}
<body></body>

于 2017-04-20T00:59:56.873 回答