使用append()移动DOM元素？

Question

我有一个类似于div元素的东西

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

我想要将一个元素从DOM中的一个位置移动到另一个位置。我可以使用appendTo()来实现这个操作，就像这样：

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

...或者这会重复吗？

如果被重复了，DOM中将会有两个具有相同id的元素。我该如何避免这种情况发生？

- bobsoap

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>

- Rob W

Answer 2

我直接从jQuery文档http://api.jquery.com/append/中获取了以下内容：

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

"如果通过这种方式选择的元素被插入到DOM的其他单个位置中，则它将被移动到目标位置（而不是克隆）："

- jgasiorowski

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);
}

工作的笔

- Ilya Kushlianski