使用Prototype将一个div从一个div移到另一个div中？

Question

在原型或正常但跨浏览器兼容的 Javascript 中，如何将一个 div 的内容移动到另一个 div 的内容中？在该 div 中有一个带有 id 的表单和具有事件观察器的相关 Javascript 代码。我不希望由于我移动了 DOM 中的某个块而导致这些功能中断。我不想使用“this innerHTML = that innerHTML”解决方案。我还需要在 DOM 加载时执行此操作。

我想要从这个状态转变为：

<div id='here'>
    <div id='MacGuffin'>
    <p>Hello Worlds!</p>
    </div>
</div>
<div id='there'>
</div>

变成这样：

<div id='here'>
</div>
<div id='there'>
    <div id='MacGuffin'>
    <p>Hello Worlds!</p>
    </div>
</div>

...当文档加载完成时，没有任何突兀的跳动。

- ʍǝɥʇɐɯ

Answer 1

您可以将此代码添加到 BODY 标签的末尾：

<script>
  document.getElementById('there').appendChild(
    document.getElementById('MacGuffin')
  );
</script>

MacGuffin会自动从一个地方移动到另一个地方，而且不会出现任何闪烁。

- Mic

---

非常感谢。虽然我没有使用BODY标签，但是我使用了DOM加载方法的原型，效果很好。 - ʍǝɥʇɐɯ

很高兴它起作用了。我不太了解原型，但如果我没记错的话，$('there').appendChild( $('MacGuffin') ) 也可以起作用。 - Mic

你可以选择将代码写在 window.onload = function(){document.getElement...} 中，这样你就可以把它放在 'there' 对象的旁边，而不是放在 BODY 的结尾。通过这个技巧，我成功地将一个加载在页面动态顶部的横幅放置在了静态底部。 - Martin T.

Answer 2

或许不是很重要的一点，但是JavaScript中没有内置的Node.migrateChild()接口方法。如果一个片段已经有了在DOM中其他地方的父元素（就像上面示例标记中的div id='MacGuffin'一样），appendChild()会在重新附加到新的父元素之前静默地从任何当前父元素中分离参数片段。在我看来，migrateChild()将是一个更具语义意义的方法名，比appendChild()更少需要StackOverflow开发人员搜索来暗示其更强大的能力。

- rickatech

Answer 3

要将here中的内容移动到there中，只需确保here包含了您想要移动的所有内容，就像一个<div>一样：

$('there').insert($('here').descendants()[0]);

descendants() 返回一个数组，而 insert 方法需要一个内容参数，因此请使用第一个元素。

- Jim C

Answer 4

要将here的内容移动到there中，你需要执行以下操作：

$('there').insert($('here').childNodes);

很遗憾，那不起作用。

与其他两个答案一样，看起来你必须使用纯JavaScript，只有原型提供了document.getElementById的简写。

var frag = document.createDocumentFragment();
for (var c = $('nav').firstChild, n; c; c = n) {
    n = c.nextSibling;
    frag.appendChild(c);
}
$('header').appendChild(frag);

（请参考John Resign的博客，了解DocumentFragments的性能统计数据：http://ejohn.org/blog/dom-documentfragments/）

- searlea

---

谢谢您为我解决这个问题。我不能使用简写的$符号，但@Mic的建议很好用。我能够在DOM加载时使用Prototype运行移动，但我很惊讶没有Prototype的解决方案。 - ʍǝɥʇɐɯ

这个是可以运行的，但似乎过于复杂了。我相信@Jim的答案更好。 - Emma Earl Kent