HTML模板内容和innerHTML的区别答案

【问题标题】：Difference between HTML template content and innerHTMLHTML模板内容和innerHTML的区别
【发布时间】：2023-03-19 20:45:01
【问题描述】：

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

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

let myTemplate = document.querySelector('template')

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

myTemplate.content

myTemplate.innerHTML

【问题讨论】：

第一个返回一个文档片段，第二个返回一个字符串。你还有什么要问的吗？

标签： javascript html dom web-component

【解决方案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>

【讨论】：

注意.content会从模板中移除模板内容，因为内容被移动了。因此，如果您颠倒了方法 1 和 2，则对 innerHTML 的调用将为空。要重复使用，您需要执行 *.append(myTemplate.content.cloneNode(true))（仅当您需要参考时才需要 appendChild）
是的，这句话很好。我更新了代码，以便模板保留其内容。