html() 未填充 HTML 模板

Question

This is driving me crazy. Can anyone see what I'm doing wrong?

Here's my HTML template.

<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>

And here's my 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);
});

Everything works exactly as expected except that my div.trip-note does not get set to the value in element.html .

author and createDate are set just fine. I've confirmed element.html contains the expected markup. I've retyped the class name several times (both in markup and in JavaScript). I tried mixing and matching html() and text() and the result is always the same: All elements are populated except for div.trip-note .

I'm either missing something very stupid or there is a peculiar issue going on.

Update

I've created a jsfiddle .

Answer 1

.find() searches for descendants, it won't find the top-level element that you're searching from. Since .trip-note is one of the top-level elements of $note , it's note selected.

Instead of using $template.html() , make a clone of $template . Then everything will be a descendant. You can use .html() when you're appending to $container to exclude the <template> top-level element.

 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()); });