Как получить текст в отдельном TD с помощью jquery

Question

У меня есть структура HTML, в которой один td содержит два текста. Я хочу обернуть второй текст в другой td и добавить его после первого td. Я сделал функцию, но не работает точно. вот пример code

//Current html 
<tr> 
<td>first <a>second</a></td> 
</tr> 

//expected result 
<tr> 
<td>first</td> 
<td><a>second</a></td> 
</tr> 

<script type="text/javascript"> 
$(function(){ 
var ff= []; 
$('a').click(function(){ 
$('td a').each(function(index){ 
ff.push($(this).prop('outerHTML')); 
$(this).remove(); 
$('td').eq(index).after().append('<td>'+ff[index]+'</td>') 
})})}) 
</script> 

Answer 1

Вы можете просто добавить каждого Td это внутри нового тд и добавить после оригинального тд:

$('a').click(function(){ 

     $('td a').each(function(){ 
      $(this).parent().after('<td></td>'); 

      $(this).appendTo($(this).parent().next()); 


      }); 
     }); 

working jsfiddle

или в одной строке (более запутанной, может быть, :)):

$('td a').each(function(){ 
      $(this).appendTo($(this).parent().after('<td></td>').next()); 
}); 

Answer 2

$('a').click(function(){ 
    $('td a').each(function(index){ 
     $(this).insertAfter($(this).parent()).wrap('<td />'); 
    }); 
}); 

jsFiddle