HTML 模板内容与内部HTML 的区别

Question

假设我有一个 HTML <template> 标签，我定义 select 如下：

<template>
  <h1>This is my template</h1>
</template>

let myTemplate = document.querySelector('template')

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

myTemplate.content

myTemplate.innerHTML

Answer 1

与 innerHTML 相反，content returns 是一个文档片段，因此您可以立即访问 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>

HTML 模板内容与内部HTML 的区别

Difference between HTML template content and innerHTML

html

javascript

dom

web-component