Перемещение элемента DOM с помощью append ()?

Question

У меня есть элемент div, например

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

..., который я бы хотел переместить из одной позиции в другую в DOM.Могу ли я сделать это с appendTo(), вот так:

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

... или это будет дублировать его?

Если он дублируется, в DOM будет два элемента с одинаковым id.Как я мог избежать этого?

Answer 1

Да, метод appendTo перемещает элементы из дерева DOM. Если вы хотите скопировать элемент, используется .clone().

Пример:

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

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

Answer 2

Я взял это непосредственно из документации jQuery http://api.jquery.com/append/

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

"Если элемент, выбранный таким образом, вставляется в одно место в другом месте DOM, он будет перемещен в цель (не клонирован)): "

Answer 3

Вы можете сделать это с помощью .append или .after или аналогичных методов.

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

Таким образом, код для перемещения первого .li из .list1 в .list2 будет:

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

Рабочая ручка