javascript - jQuery: move the complete element into another one, but not its content only - Stack Overflow

admin管理员组

文章数量:1340773

There is the source DIV element that must appear within the target DIV.

And there is jQuery appendTo method that seems to do that for me.

For example:

<div class="source">Move Me</div>
<div class="destination"></div>

jQuery(document).ready(function(){
    jQuery('.source').contents().appendTo('.destination')
  });

But actually it only moves source's content into the target DIV, keeping the empty source DIV where it originally was: here is the JSFiddle that demonstrates this.

So, instead of

<div class="destination">
    <div class="source">Move Me</div>
</div>

the appendTo result is just

<div class="source"></div>
<div class="destination">Move Me</div>

Is there a way to achieve

<div class="destination">
    <div class="source">Move Me</div>
</div>

without extra wrapping elements?

There is the source DIV element that must appear within the target DIV.

And there is jQuery appendTo method that seems to do that for me.

For example:

<div class="source">Move Me</div>
<div class="destination"></div>

jQuery(document).ready(function(){
    jQuery('.source').contents().appendTo('.destination')
  });

But actually it only moves source's content into the target DIV, keeping the empty source DIV where it originally was: here is the JSFiddle that demonstrates this.

So, instead of

<div class="destination">
    <div class="source">Move Me</div>
</div>

the appendTo result is just

<div class="source"></div>
<div class="destination">Move Me</div>

Is there a way to achieve

<div class="destination">
    <div class="source">Move Me</div>
</div>

without extra wrapping elements?

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Feb 28, 2017 at 2:32 YKKYYKKY 60511 gold badge88 silver badges1919 bronze badges 4

• 2 jQuery('.source').appendTo('.destination') – Michael Coker Commented Feb 28, 2017 at 2:35
• 3 You're calling .contents(), so that only moves...wait for it...the contents. – nnnnnn Commented Feb 28, 2017 at 2:36
• 1 I've taken the script I'm using at the other fragment of the page and neither while filling JSFiddle nor while creating this question I haven't noticed the .contents() in my text! That's probably because it is 5:30am. Anyway it's hard to be a beginner... @MichaelCoker, you were the first, please repost your reply as the answer so that I could upvote it. Thanks a lot to both of you :) – YKKY Commented Feb 28, 2017 at 2:42
• 2 @YKKY you're wele, will do. Thanks for being fair about that! – Michael Coker Commented Feb 28, 2017 at 4:15

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 9

$.contents() will grab the content of the element, but leave the element itself alone. The default behavior of $.append() and $.appendTo() is to move the entire element. So in your example, you simply need to use jQuery('.source').appendTo('.destination') and that will move .source in to .destination

jQuery('.source').appendTo('.destination')

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="source">Move Me</div>
<div class="destination"></div>

Just get rid of that .contents() method to move the whole element.

$('.destination').append($('.source'))

will turn

<div class="destination"></div>
<div class="source">Move Me</div>

into

<div class="destination">
     <div class="source">Move Me</div>
</div>

Simply exclude .contents() in your own solution, this way:

jQuery(document).ready(function(){
    jQuery('.source').appendTo('.destination')
});

Then it will move Div.source pletely into Div.destination. Here is the fiddle: https://jsfiddle/NDFA/cur9qg2w/

First all.The Jquery's appendTo behavior is append after an element to another element. So that behavior is correct. Also append method may be you need.

本文标签：