Question

在原型或普通但跨浏览器兼容的Javascript中，如何将div的内容移动到另一个div的内容？

div内部是一个带有id和带有事件观察者的依赖Javascript代码的表单。我不希望这个因为我在DOM中移动了一个块而中断。 'innerHTML = 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会自动从一个移动到另一个并且不会有任何闪烁。

Answer 2

也许不是一个重点，但是没有Node.migrateChild（）内置的Javascript接口方法。如果片段已经在DOM中的其他位置具有父级（如div id =＆＃39; MacGuffin＆＃39;在上面的示例标记中），则appendChild（）会在重新附加新父级之前从任何当前父级中悄悄地分离参数片段。在我看来，migrateChild（）将是一个比appendChild（）更具语义意义的方法名称，而不需要StackOverflow开发人员搜索来暗示其更强大的功能。

Answer 3

要将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);

（有关DocumentFragments的效果统计信息，请参阅John Resign的博客： http://ejohn.org/blog/dom-documentfragments/）

Answer 4

要将here的内容移动到there，只要here包含您要移动的所有内容，就像{{1}一样}}：

<div>

descendants（）返回一个数组，insert接受内容，所以使用第一个元素。

使用Prototype将div从一个div内部移动到另一个div？

4 个答案: