javascript - Jquery テンプレート - テーブル要素内にテーブル行を追加し、最初に既存の行をクリアします

Question

次のようなテンプレートがあります。

<div id="PopUpTemplate" style="display: none">
    <tr><td>${Key}</td><td>${Value}</td></tr>
</div>

そして、それをテーブルに追加したい:

<div id="MessageBox">
    <table>
    </table>
</div>

次に、Jquery UIダイアログを使用して、それをポップアップとして表示します。これは、次のように行っています:

$('#PopUpTemplate').tmpl(data).appendTo("#MessageBox table");


        $('#MessageBox').dialog({
            autoOpen: true,
            modal: true,
            closeOnEscape: true,
            buttons: { 'Ok': function () { $(this).dialog("close"); } },
            position: 'center'
        });

私には2つの問題があります：

</table>1 つ目は、終了タグの後にテンプレートが追加されることです。

2 つ目は、これを複数回呼び出すと、より多くのデータがテーブルに追加されることです。しかし、最初にすべての既存の行をクリアしてから、新しいセットを追加したい