Moving an element to another location

I want each row's first col content to be moved to its corresponding third column content. How do I do this? its basically moving the content to its parent's sibling identified by colB class

<tr>
<td class="move">
    <div id="move-0">move me 0</div>
</td>
<td class="colA">
    <div>ColA</div>
</td >
<td class="colB">
    <div>ColB</div>
</td>
</tr>
<tr>
<td class="move">
    <div id="move-开发者_运维问答1">move me 1</div>
</td>
<td class="colA">
    <div>ColA</div>
</td >
<td class="colB">
    <div>ColB</div>
</td>
</tr>
...

to:

<tr>
<td class="move">

</td>
<td class="colA">
    <div>ColA</div>
</td >
<td class="colB">
    <div>ColB</div>
    <div id="move-0">move me 0</div>
</td>
</tr>
<tr>
<td class="move">

</td>
<td class="colA">
    <div>ColA</div>
</td >
<td class="colB">
    <div>ColB</div>
    <div id="move-1">move me 1</div>
</td>
</tr>

TIA

---

jQuery('td.move').each(function(){
    var t = jQuery(this);
    t.parent().find('td:last').append(t.children());
});

---

Use jQuery.html() and jQuery.append().