Как добавить элемент в элемент клонирования, прежде чем вставлять его в другой раздел документа с помощью jquery?

Question

Допустим, у меня есть следующий HTML-код

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

Теперь я клонировать выше HTML-код с помощью JQuery ..

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>

теперь вы можете использовать innerHTML из сНа TMP