jQuery 3.6.0 无法解析“模板”标签 [重复]答案

【问题标题】：jQuery 3.6.0 can't parse "template" tag [duplicate]jQuery 3.6.0 无法解析“模板”标签 [重复]
【发布时间】：2021-09-21 07:42:22
【问题描述】：

前几天我正在使用 jQuery 3.6.0 做一个项目，但我发现它无法解析 <template> 标签。

参考下面的例子。

const temp = $("#main");
console.log(temp.find("div").html()); // this isn't working


const temp2 = $("#main2");
console.log(temp2.find("div").html()); // this is working

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<template id="main">
  <div class="first">
    <span>Hola</span>
  </div>
</template>


<div id="main2" style="display:none;">
  <div class="first">
    <span>Hola</span>
  </div>
</div>

我在这里做错了什么？

【问题讨论】：

<template id="main"> 是来自像 vuejs 这样的框架吗？
不，这是普通的 HTML。我没有使用任何框架。
这能回答你的问题吗？ html template tag and jquery
是的，我得到了解决方案，但它没有解释为什么会这样。

标签： javascript html jquery

【解决方案1】：

template 生成一个文档片段，其中包含template 元素的内容。您必须使用content 访问它。

所以你可以做的是$(temp[0].content).find('div').html()

但是你需要小心MDN: <template>: The Content Template element：

但是，HTMLTemplateElement 有一个content 属性，它是一个只读的 DocumentFragment，其中包含模板所代表的 DOM 子树。请注意，直接使用内容的值可能会导致意外行为，请参阅下面的避免 DocumentFragment 陷阱部分。

const temp = $("#main");
console.log($(temp[0].content).find('div').html()); // this isn't working


const temp2 = $("#main2");
console.log(temp2.find("div").html()); // this is working

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<template id="main">
  <div class="first">
    <span>Hola</span>
  </div>
</template>


<div id="main2" style="display:none;">
  <div class="first">
    <span>Hola</span>
  </div>
</div>

【讨论】：

好像我明白了。谢谢。