Moving a span element from one div to another with jQuery?

I want to move (on page load) the <span>votes</span> part at the bottom and place it inside the .rating-result div:

<div class="topic-like-count average">
 <h4>
  <div style="display: none">UN:F [1.9.10_1130]</div>
  <div class="thumblock ">
   <span class="rating-result">
     <div id="gdsr_thumb_text_43_a" class="gdt-size-20 gdthumbtext">0</div>
  </span>
  <div class="ratingtext ">
  </div>
  <div class="raterclear"></div>
  </div>
 </h4>
<span>votes</span>
</div>

So that the final result looks like this:

<div class="topic-like-count average">
 <h4>
  <div style="display: none">UN:F [1.9.10_1130]</div>
  <div class="thumblock ">
   <span class="rating-result">
     <div id="gdsr_thumb_text_43_a" class="gdt-size-20 gdthumbtext">0</div>
     <span>votes</span>
  </span>
  <div class="ratingtext ">
  </div>
  <div class="raterclear"></div>
  </d开发者_如何学Pythoniv>
 </h4>
</div>

How to accomplish that with jQuery?

EDIT:

Forgot to mention that where is more than one .topic-like-count div (for example):

<div class="topic-like-count good">
 <h4>
  <div style="display: none">UN:F [1.9.10_1130]</div>
  <div class="thumblock ">
   <span class="rating-result">
     <div id="gdsr_thumb_text_43_a" class="gdt-size-20 gdthumbtext">1</div>
  </span>
  <div class="ratingtext ">
  </div>
  <div class="raterclear"></div>
  </div>
 </h4>
<span>votes</span>
</div>

<div class="topic-like-count average">
 <h4>
  <div style="display: none">UN:F [1.9.10_1130]</div>
  <div class="thumblock ">
   <span class="rating-result">
     <div id="gdsr_thumb_text_43_a" class="gdt-size-20 gdthumbtext">0</div>
  </span>
  <div class="ratingtext ">
  </div>
  <div class="raterclear"></div>
  </div>
 </h4>
<span>votes</span>
</div>

(I think I need to use ($this) somewhere)

$span=$("#votes").clone();
$("#votes").remove();
$("#gdsr_thumb_text_43_a").append($span);

http://jsfiddle.net/dc47b/4/

EDIT

function doIt(){
    setTimeout(function(){
    $span=$("#votes").clone();
    $("#votes").remove();
    $("#gdsr_thumb_text_43_a").append($span);

    }, 1000);
}


window.onload = function() {
     doIt();

   };

http://jsfiddle.net/dc47b/5/

yet another edit

$(".topic-like-count").each(function(){

$span=$(this).find(".vote").clone();
    $(this).find(".vote").remove();
    $(this).find("#gdsr_thumb_text_43_a").append($span);

});

http://jsfiddle.net/BG7HC/1/

and

http://jsfiddle.net/dc47b/6/

$('.topic-like-count > span').appendTo('.rating-result');

There is no point in cloning, you are just wasting cycles.

Use the appendTo keyword.

Check out the SO answer How to move an element into another element?.

Also you could I guess use clone and then remove the original

To select the actual span in question use something like;

$(".topic-like-count:last-child")

$('div.topic-like-count').delegate('span.votes', 'click', function() {
    $('span.rating-result').append($(this));
});

Use delegates, it has a great way of sectioning off logic.

The above code translates to:

• on every 'div' with 'topic-like-count' class.. (*)
• listen to see if a 'span' object with 'votes' class.. (**)
• causes a 'click' event.
• when that happens, find the 'span' with a 'rating-result' class w/i (*)..
• and add (**) after detaching it from it's original spot

I used appendTo jquery function for easiest way to moving content

$mgdiv=$(".your_div_name");
$($mgdiv).appendTo(".target_div_name");