jquery - 使用 HTML 模板和 Jquery 克隆将新面板添加到 div

Question

我有这个简单的 html 模板

<template id="templateDefaultPanel">
    <div class="panel panel-default"> 
        <div class="panel-heading"> 
            <h3 class="panel-title">Panel title</h3> 
        </div> 
        <div class="panel-body"> 
            Panel content 
        </div>
    </div>
</template>

我正在使用 jquery var $panelTemplate = $("#templateDefaultPanel").clone(); 克隆它，然后修改内部 html $panelTemplate.find('.panel- body').html('hey there'); 然后将其设置为附加到另一个 div $('#allNotes').prepend($panelTemplate.html()); 问题是没有 $panelTemplate 内容被修改。然后当我尝试 prependTo 时，模板被插入，当然不会向用户显示。

当我将模板切换为 div 时，我上面的所有代码都可以工作，但如果我不能重用 html 并且你知道模板，那么模板的意义何在。

Answer 1

你不想克隆模板，因为你想要模板的内容，而不是模板本身，所以你可以使用 innerHTML

如果您查看 vanilla js 示例，它更有意义，因为您使用 .content 而不是 template

const template = document.querySelector('#templateDefaultPanel');

template.content.querySelector('.panel-title').innerHTML = 'hello world';
template.content.querySelector('.panel-body').innerHTML = 'the body here';

const clone = document.importNode(template.content, true);
document.querySelector('#allNotes').appendChild(clone);

所以你不使用模板本身而是使用它的内容，所以使用 jQuery 的一种方法可能是

const $template = $( $('#templateDefaultPanel')[0].innerHTML );
// or alternatively get the content with .prop('content')

$template.find('.panel-title').html('hello world');
$template.find('.panel-body').html('the body here');

$('#allNotes').append($template);