Moving a DOM element with append()?

Question

I have a div element like

<div id="move">Something</div>

...that I'd like to move from one position to another in the DOM. Can I do this with appendTo(), like so:

$('#move').fadeOut(500, function() {
   $(this).appendTo('#another-container').fadeIn(500);
});

...or will this duplicate it?

If it's being duplicated, there would be two elements with the same id in the DOM. How could I avoid this?

score 15 · Accepted Answer · edited Aug 09 '14 at 20:39

15

Yes, the appendTo method moves elements from the DOM tree. If you want to copy an element, .clone() is used.

Example:

Body:   <div>
           <a>Test</a>
        </div>
        <span></span>
jQuery code:
   $("a").appendTo("span");

After:  <div></div>
        <span>
           <a>Test</a>
        </span>

edited Aug 09 '14 at 20:39

Jeff

141
8

answered Nov 24 '11 at 20:46

Rob W

341,306
83
791
678

score 6 · Answer 2 · answered Jun 19 '14 at 21:46

6

I took it directly from jQuery documentation http://api.jquery.com/append/

$( ".container" ).append( $( "h2" ) );

"If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved into the target (not cloned):"

answered Jun 19 '14 at 21:46

jgasiorowski

1,033
10
20

score 0 · Answer 3 · answered Jun 14 '17 at 16:19

You can do it with .append or .after or similar methods.

<ul class="list1">
  <li>You wanted to move this element!</li>
  <li>Element 2</li>
  <li>Element 3</li>
</ul>

<ul class="list2">
  <li></li>
  <li>Element 2</li>
  <li>Element 3</li>
</ul>

<button onclick="moveIt()">Move element</button>

So the code to move the first .li from .list1 to .list2 will be:

function moveIt() {
  var elementToBeMoved = $(".list1 li:first");
  $(".list2 li:first").append(elementToBeMoved);
}

Working pen

Moving a DOM element with append()?

3 Answers3