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

Question

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>
  </div>
 </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)

Answer 1

$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/

Answer 2

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

克隆没有意义，你只是在浪费周期。

Answer 3

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")

Answer 4

$('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

Answer 5

I used appendTo jquery function for easiest way to moving content

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