使用 append() 移动 DOM 元素？答案

【问题标题】：Moving a DOM element with append()?使用 append() 移动 DOM 元素？
【发布时间】：2012-01-05 22:23:29
【问题描述】：

我有一个类似div 的元素

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

...我想在 DOM 中从一个位置移动到另一个位置。我可以用appendTo() 做这个吗，像这样：

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

...或者这会复制它吗？

如果它被复制，则 DOM 中会有两个具有相同 id 的元素。我怎样才能避免这种情况？

【问题讨论】：

标签： jquery appendto

【解决方案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>

【讨论】：

【解决方案2】：

我直接取自 jQuery 文档http://api.jquery.com/append/

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

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

【讨论】：

【解决方案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);
}

Working pen

【讨论】：