HTML模板内容与innerHTML的差异

Question

假设我有一个HTML<template>标记，我定义和选择如下:

<template>
<h1>This is my template</h1>
</template>
let myTemplate = document.querySelector('template')

模板的这些属性有什么区别:

myTemplate.content
myTemplate.innerHTML

Answer 1

与innerHTML相反，content返回文档片段，因此您可以立即访问DOM，而无需中间转换到字符串。

用法的区别如下:

let myTemplate = document.querySelector('template');
// Method 1
let myDiv1 = document.getElementById('div1');
myDiv1.innerHTML = myTemplate.innerHTML;
// Method 2
let myDiv2 = document.getElementById('div2');
myDiv2.appendChild(myTemplate.content.cloneNode(true));

<template>
<h3>This is my template</h3>
<p>Hello World</p>
</template>
<div id="div1"></div>
<hr>
<div id="div2"></div>