How to merge parent content inside his first child?

Question

I'm not able to figure out how to merge parent content inside his first child with jQuery.

I want to merge all the elements (including text node) of an element within its <a>child.

I have this:

<td class="row">
  <a href="#">
    <span class="iconouter">
                <img class="icon" src="...">
            </span> Type of document
  </a>
  : Form
  <span class="type-nb">(1)</span>
</td>

And I want to do this:

<td class="row">
  <a href="#">
    <span class="iconouter">
                    <img class="icon" src="...">
                </span> Type of document: Form <span class="type-nb">(1)</span>
  </a>
</td>

Answer 1

Finally, I found a solution using jQuery contents() function :

$('.row').each(function() {
    $(this).find('a').append($(this).contents()[1], $(this).contents()[2]);
});

It's not very flexible, but it suits my needs. Thank you all!

Answer 2

Updated after comment

Fiddle : http://jsfiddle.net/WaW27/

HTML :

<table>
    <tr>
        <td>
           <a href="#">
             <span class="iconouter">
               <img class="icon" src="...">
             </span>
              Type of document
           </a> 
            : Form 
           <span class="type-nb">(1)</span>
       </td>
    </tr>
</table>

JS :

$(document).ready(function(){
    $('td').each(function(){
        $content = $(this).children().first().append(  
            $(this).html().replace(   
                $('<div>').append( $(this).children().first().clone() ).html(), '' )  
         ); 
        $(this).html('').append($content);
    });
});

Result :

 <tr>
    <td>
      <a href="#">
            <span class="iconouter">
            <img class="icon" src="...">
            </span>
             Type of document


             : Form 
           <span class="type-nb">(1)</span>
        </a>
     </td>
</tr>

Answer 3

Hi you can do it that way:

var test = jQuery('.row').html().replace($("<div />").append($('.row a').clone()).html(),'');
jQuery('.row').html($('.row a').clone()).html();
jQuery('.row a').append(test);

I have created a fiddle here:

http://jsfiddle.net/j5Uqd/