El otro día estaba trabajando en un proyecto usando jQuery 3.6.0 pero descubrí que no puede analizar las etiquetas <template> .
Consulte el siguiente ejemplo.
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>¿Qué estoy haciendo mal aquí?
template da como resultado un fragmento de documento en el que se encuentra el contenido del elemento de template . Tienes que acceder usando content .
Entonces, lo que podría hacer es $(temp[0].content).find('div').html()
Pero debe tener cuidado con ese MDN: <template> : el elemento de plantilla de contenido :
Sin embargo, HTMLTemplateElement tiene una propiedad de
content, que es un DocumentFragment de solo lectura que contiene el subárbol DOM que representa la plantilla. Tenga en cuenta que el uso directo del valor del contenido podría dar lugar a un comportamiento inesperado; consulte la sección Cómo evitar el escollo de DocumentFragment a continuación.
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>