help with moving elements with jquery

Question

i got these two in the DOM:

<div id="buffert">
      <span class="left"><a>link</a><a>link</a></span>
      <span class="right">Some text<span>title</span></span>
</div>

<div id="final">
      <span class="left">&nbsp;</span>
      <span class="right">&nbsp;</span>
</div>

i want to move whatever elements within the div#buffert span.left and span.right to div#final span.left and span.right.

i tried:

 $('div#final span.left').append($('div#buffert span.left'));
 $('div#final span.left').append($('div#buffert span.left.children'));
 $('div#final span.left').append($('div#buffert span.left.children()'));

but it doesnt work.

could someone help me?

Answer 1

There are numerous ways to accomplish what you're asking...these are just a few.

With the structure being identical, why not just replace the HTML?

$("#final").html( $("#buffert").html() );

If you wanted to append them to the #final element, you would use $.appendTo():

$("#buffert .left, #buffert .right").appendTo("#final");

Or you could move the children themselves over (and not merely the HTML)

$("#final .left").html("").append( $("#buffert .left").children() );