Jquery 模板生成的 HTML 出现在标签之外

Question

<ul class="messagesList ifClicked">
           <script id="questionsTemplate" type="text/x-jquery-tmpl">  
                   <li>
                      <span class="from">${source} </span>
                   </li>
             </script>
</ul>

我有上面的 jquery 模板代码。 我的预期输出就像

<ul class="messagesList ifClicked">
                   <li>
                      <span class="from">Reuters</span>
                   </li>                   
                   <li>
                      <span class="from">CNN</span>
                   </li>
                   <li>
                      <span class="from">CNN</span>
                   </li>
</ul>

但即将发生的是（在寻找萤火虫时）

<ul class="messagesList ifClicked">
           <script id="questionsTemplate" type="text/x-jquery-tmpl">  
                   <li>
                      <span class="from">${source} </span>
                   </li>
             </script>
</ul>
                       <li>
                          <span class="from">Reuters</span>
                       </li>                   
                       <li>
                          <span class="from">CNN</span>
                       </li>
                       <li>
                          <span class="from">CNN</span>
                       </li>

这种行为的原因是什么？

Answer 1

我会将模板移到 ul 列表之外。这样，如果您想重置它，您可以简单地清空列表。

HTML：

<script id="questionsTemplate" type="text/x-jquery-tmpl">  
        <span class="from">${source} </span>
</script>

<ul class="messagesList ifClicked">

</ul>

JS：

$(document).ready(function(){

    var list = [ 'Routers', 'CNN', 'CNN' ];

    var tmpl = '';
    $.each(list, function(num, el) {
        tmpl =  $('<li>').html($('#questionsTemplate').html());
        tmpl.find('.from').html(el);
        $('.messagesList').append(tmpl);
    });

});

DEMO and CODE