如何在使用jquery将元素插入到文档的另一部分之前将元素添加到克隆元素中？

Question

假设我有以下HTML代码

<tr class='mainrow'>
  <td class='firstName'>John</td>
  <td class='lastName'>Macfarland</td>
</tr>

现在我使用jquery克隆上面的html代码..

var mainrowCloned = $(".mainrow").clone(true);

克隆了mainrow之后，我现在需要在mainrowCloned元素中添加另一个列，如下面的html代码，但是如何在jquery代码中完成此操作？

<tr class='mainrow'>
  <td class='newColumn'>Date</td>
  <td class='firstName'>John</td>
  <td class='lastName'>Macfarland</td>
</tr>

Answer 1

<table>
  <tr class='mainrow'>
    <td class='firstName'>John</td>
    <td class='lastName'>Macfarland</td>
  </tr>
</table>
<button>ndksaj</button>
<table class="tmp"></table>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
  $('button').click(function() {
    $('.tmp').html('');
    $(".mainrow").clone().appendTo('.tmp');
    $('.tmp > tbody > tr.mainrow').append("<td class='newColumn'>Date</td>");
  });
</script>

现在你可以使用div tmp

的innerHTML