Moving span element from one div to another using jQuery?

Question

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

 <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, the end result is as follows:

 <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 do it using jQuery?

EDIT:

I forgot to mention that where there 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/

one more 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'); 

It makes no sense to clone, you're just wasting cycles.

Answer 3

Use the appendTo keyword.

Check SO answer. How to move an element to another element? .

You can also assume that use the clone, and then delete the original

To select the actual space, 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 clipping logic.

The above code translates to:

• on each "div" with a theme-like class .. (*)
• listen, is there a span object with a class of votes .. (**)
• raises the 'click' event.
• when this happens, find the "span" with the class "rating-result" w / i (*) ..
• and add (**) after disconnecting the original place from it.

Answer 5

I used the appendTo jquery function for the easiest way to move content

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