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

虽然我确实已经知道该问题的答案，但是如果您确实想要/需要使用jQuery clone()方法-也许是因为您还想通过{包含数据和事件{1}} －这样，您就无法使用clone(true)元素进行克隆。

我不知道为什么，我也没有看到任何文档来说明原因，但是如果您<template>和clone()，那么没有其他jQuery方法可对克隆的jQuery对象起作用< / strong>。

因此，就jQuery的使用而言，<template>元素似乎不如隐藏的<template>有用，除非我可以<div> {strong> 的。

在旁注中，在clone()元素上使用<template>实际上在IE中有效，但在任何所谓的“现代浏览器”中均无效。可能是因为IE对clone()的处理方式与其他任何元素都不同，但是其他元素却...... p

Answer 2

毕竟你必须创建一个div容器并向其添加模板内容，然后添加div元素。模板元素根本不会被渲染。看到： https://developer.mozilla.org/de/docs/Web/HTML/Element/template

还有一个例子。

Answer 3

您不希望克隆模板，因为您需要模板的内容，而不是自己的模板，因此您可以使用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);

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

3 个答案: