Estoy tratando de manipular dentro del elemento <template> con jQuery, pero desafortunadamente algunas funciones como find() no funcionan para elementos secundarios.
¿Cómo puedo reemplazar el texto de la clase .name de esta plantilla y agregarlo dentro de otro elemento html?
<template id="conversationTemplate"> <div class="card conversation mb-1"> <div class="name">##name##</div> </div> </template>Una solución simple que tenemos aquí usando solo JQuery. Cuatro líneas, pero con unos pocos pasos podemos hacerlo singleliner para los que lo prefieran.
$(() => { const $templateTag = $('#conversationTemplate'); const $clonedContent = $($('#conversationTemplate').html()); $clonedContent.find('.name').html('other text here'); $templateTag.wrap('<template id="conversationTemplate"></div>').parent().html($clonedContent); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <template id="conversationTemplate"> <div class="card conversation mb-1"> <div class="name">##name##</div> </div> </template>No puede usar las funciones del selector de jQuery directamente en una plantilla. Necesitas analizar esto primero.
var tpl = $('#conversationTemplate')[0].outerHTML; $template = $($.parseXML(tpl)).contents(); console.log($template.find('.name').html()); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <template id="conversationTemplate"> <div class="card conversation mb-1"> <div class="name">##name##</div> </div> </template>Puede hacer esto en jQuery pero no es necesario. Esto es javascript simple que también funcionará.
var template = document.getElementById('conversationTemplate'); var html = template.innerHTML.replace('##name##', 'Jane'); var target = document.getElementById('the-other-element-you-mention'); target.innerHTML = html;Hace dos cosas que pediste: