jQuery 3.6.0无法正确解析<template>标签问题咨询

问题根因 #

<template> 标签遵循HTML5原生规范，其内部嵌套的DOM内容不会被挂载到当前页面的真实DOM树中，而是独立存储在元素自身的 content 属性（属于DocumentFragment文档片段类型）内。直接对 <template> 对应的jQuery对象调用 find() 方法时，只会检索真实DOM树上的子节点，无法命中存储在 content 中的内容，因此返回空结果。

而你用隐藏的普通<div>做容器时，它的内容是真实存在于DOM树中的，只是视觉上隐藏，所以find()可以正常检索到内容。

修复方案 #

先获取<template>标签的content属性，将其转为jQuery对象后再执行查找操作即可，修改后的代码如下：

const temp = $("#main");
// 先获取template的content文档片段，转jQuery对象后再查找节点
console.log($(temp[0].content).find("div").html()); // 可正常输出 <span>Hola</span>

const temp2 = $("#main2");
console.log(temp2.find("div").html()); // 原有逻辑保持正常

补充说明 #

该现象和你使用的jQuery 3.6.0版本无关，所有版本的jQuery直接操作<template>标签都会出现同样的表现，属于<template>标签本身的规范设计，不是jQuery的bug。

内容的提问来源于stack exchange，提问作者DelusionaL