html() 没有填充 HTML 模板

Question

这快把我逼疯了。谁能看到我做错了什么？

这是我的 HTML 模板。

<template id="note-template">
    <div class="trip-note">
    </div>
    <div class="trip-note-footer">
        <div class="d-flex justify-content-between">
            <div>
                <span class="note-author"></span>
                &bull;
                <span class="note-date"></span>
            </div>
            <div>
                <img class="edit-note" src="~/images/tteditnote.png" title="Edit Note">
                <img class="delete-note" src="~/images/ttdeletenote.png" title="Delete Note">
            </div>
        </div>
    </div>
</template>

这是我的 JavaScript。

var $container = $('#trip-notes');
var $template = $('#note-template');
$container.empty();
response.forEach(function (element) {
    var $note = $($template.html());
    $note.find('.trip-note').html(element.html);
    $note.find('.note-author').text(element.author);
    $note.find('.note-date').text(element.createDate);
    $container.append($note);
});

除了我的div.trip-note 没有设置为element.html 中的值之外，一切都按预期工作。

author 和 createDate 设置得很好。我已经确认 element.html 包含预期的标记。我已经多次重新键入类名（在标记和 JavaScript 中）。我尝试混合和匹配html() 和text()，结果始终相同：除了div.trip-note，所有元素都已填充。

我要么遗漏了一些非常愚蠢的东西，要么出现了一个特殊的问题。

更新

我创建了一个jsfiddle。

Answer 1

.find() 搜索后代，它不会找到您正在搜索的顶级元素。由于.trip-note 是$note 的顶级元素之一，因此被选中。

不要使用$template.html()，而是克隆$template。那么一切都将是一个后代。您可以在附加到 $container 时使用 .html() 来排除 <template> 顶级元素。

var $container = $('#trip-notes');
var $template = $('#note-template');
$container.empty();
response.forEach(function (element) {
    var $note = $template.clone();
    $note.find('.trip-note').html(element.html);
    $note.find('.note-author').text(element.author);
    $note.find('.note-date').text(element.createDate);
    $container.append($note.html());
});