更改jQuery模板'；在附加到DOM之前先删除HTML

我在使用jQuery模板时遇到了一个问题，与使用普通jQuery DOM对象的方式相同。在将模板函数添加到DOM之前，我需要更改模板函数创建的HTML。
下面例子中的注释解释了我想做什么，以及哪里错了

 <script id="movieTemplate" type="text/x-jquery-tmpl">
  <tr class="week_${week}">
   <td colspan="6">Vecka: ${week}</td>
  </tr>
  <tr class="detail">
   <td>Kund: ${customer}</td>
   <td>Projekt: ${project}</td>
   <td>Tidstyp: ${time_type}</td>
   <td>Datum: ${date}</td>
   <td>Tid: ${quantity}</td>
   <td>Beskrivning: ${description}</td>
  </tr>
 </script>


 <script type="text/javascript">
  var movies = [
    { customer: "SEMC", project: "Product catalogue", time_type: "Programmering", date: "2010-11-08", quantity: 2, description: "buggar", week: 45 },
    { customer: "SEMC", project: "Product catalogue", time_type: "Programmering", date: "2010-11-09", quantity: 3, description: "buggar igen", week: 45 }
  ];
  $("#movieTemplate").tmpl(movies).appendTo("#movieList");

  $("#btnAdd").click(function () {
   //hash with data
   var data = { customer: $("#clients").val(), project: $("#projects").val(), time_type: $("#timeTypes").val(), date: $("#date").val(), quantity: $("#quantity").val(), description: $("#description").val(), week: $("#week").val() }

   //do the templating
   var html = $("#movieTemplate").tmpl(data).find(".week_" + data.week).remove().appendTo("#movieList");
            console.log(html.html()); //Returns null. WHY?!

            var html = $("#movieTemplate").tmpl(data).appendTo("#movieList");
   console.log(html.html()); //Returns the first <tr> only. But appends the full html correctly
   return false;
  });
 </script>

维卡：${week}
Kund:${customer}
项目：${project}
TIDSYP:${time\u type}
数据：${date}
Tid:${quantity}
Beskrivning:${description}
var电影=[
{客户：“SEMC”，项目：“产品目录”，时间类型：“编程”，日期：“2010-11-08”，数量：2，描述：“buggar”，周数：45}，
{客户：“SEMC”，项目：“产品目录”，时间类型：“编程”，日期：“2010-11-09”，数量：3，描述：“buggar igen”，周数：45}
];
$（“#movieTemplate”）.tmpl（movies）.appendTo（“#movieList”）；
$（“#btnAdd”）。单击（函数（）{
//用数据散列
var data={customer:$（“#clients”）.val（），project:$（“#projects”）.val（），time:$（“#timeTypes”）.val（），date:$（“#date”）.val（），quantity:$（“#quantity”）.val（），description:$（#description”）.val（），week:$（#week”）.val（）
//做模板
var html=$（“#movieTemplate”）.tmpl（data）.find（“.week#”+data.week）.remove（）.appendTo（“#movieList”）；
console.log（html.html（））；//返回null。为什么？！
var html=$（“#movieTemplate”）.tmpl（数据）.appendTo（“#movieList”）；
console.log（html.html（））；//只返回第一个。但是正确地附加完整的html
返回false；
});

您正在追加删除的元素，如果要删除该元素，请追加您需要使用的剩余内容以跳回链中，如下所示：

var html = $("#movieTemplate").tmpl(data).filter(".week_" + data.week).remove()
                                         .end().appendTo("#movieList");

var html = $("#movieTemplate").tmpl(data).appendTo("#movieList")
                              .filter(".week_" + data.week).remove();

当前，您正在调用已删除的行，因为这两行都位于对象的根级别，并返回第一个匹配元素的内容

但总体而言，更好的替代方案是在它安全地进入DOM后处理它，如下所示：

var html = $("#movieTemplate").tmpl(data).filter(".week_" + data.week).remove()
                                         .end().appendTo("#movieList");

var html = $("#movieTemplate").tmpl(data).appendTo("#movieList")
                              .filter(".week_" + data.week).remove();