Javascript 使用原型将一个 div 从一个 div 内部移动到另一个 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6329108/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Moving a div from inside one div to another div using Prototype?
提问by ??????
In prototype or normal-but-cross-browser-compatible Javascript, how do I move the contents of a div to the contents of another div?
在原型或普通但跨浏览器兼容的 Javascript 中，如何将 div 的内容移动到另一个 div 的内容？
Inside the div is a form with ids and dependent Javascript code with event observers. I don't want this to break just because I have moved a block in the DOM. A 'this innerHTML = that innerHTML' solution is not what I am looking for. I will also be needing to do this when the DOM is loaded.
在 div 中是一个带有 id 的表单和带有事件观察器的相关 Javascript 代码。我不希望这只是因为我在 DOM 中移动了一个块而中断。'this innerHTML = that innerHTML' 解决方案不是我正在寻找的。当 DOM 加载时，我也需要这样做。
I want to go from this:
我想从这个开始：
<div id='here'>
<div id='MacGuffin'>
<p>Hello Worlds!</p>
</div>
</div>
<div id='there'>
</div>
to this:
对此：
<div id='here'>
</div>
<div id='there'>
<div id='MacGuffin'>
<p>Hello Worlds!</p>
</div>
</div>
...when the document loads with nothing jumping about.
...当文档加载时没有任何跳跃。
回答by Mic
You can add this at the very end of the BODY tag:
您可以在 BODY 标签的最后添加：
<script>
document.getElementById('there').appendChild(
document.getElementById('MacGuffin')
);
</script>
MacGuffinwill be moved automatically from one to the other.
And there won't be any flickering.
MacGuffin会自动从一个移动到另一个。
并且不会有任何闪烁。
回答by rickatech
Perhaps not a major point, but there is no Node.migrateChild() built-in Javascript interface method. If a fragment already has a parent elsewhere in the DOM (as div id='MacGuffin' does in example markup above), appendChild() quietly detaches the argument fragment from any current parent before reattaching under the new parent. In my mind migrateChild() would be a more semantically meaningful method name than appendChild(), less need for StackOverflow developer searches to allude to its more powerful abilities.
也许不是重点，但没有 Node.migrateChild() 内置的 Javascript 接口方法。如果一个片段在 DOM 的其他地方已经有一个父对象（如 div id='MacGuffin' 在上面的示例标记中所做的那样）， appendChild() 会在重新附加到新父对象下之前悄悄地将参数片段与任何当前父对象分离。在我看来，migrateChild() 将是一个比 appendChild() 更具语义意义的方法名称，不需要 StackOverflow 开发人员搜索来暗示其更强大的功能。
回答by searlea
To move the contentsof hereinto there, you're basically after:
要移动内容的here进入there，你基本上后：
$('there').insert($('here').childNodes);
Sadly, that doesn't work.
可悲的是，这行不通。
As with the other two answers, it looks like you have to resort to plain JavaScript with prototype only providing a shorthand for document.getElementById.
与其他两个答案一样，您似乎必须求助于纯 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);
(See John Resign's blog for performance stats on DocumentFragments: http://ejohn.org/blog/dom-documentfragments/)
（有关 DocumentFragments 的性能统计信息，请参阅 John Resign 的博客：http: //ejohn.org/blog/dom-documentfragments/）
回答by Jim C
To move the contentsof hereinto there, this works, as long as hereencloses everything you want to move, like a <div>:
要移动内容的here进入there，这个工作，只要here你想移动，就像一个封闭的一切<div>：
$('there').insert($('here').descendants()[0]);
descendants() returns an array, and insert takes content, so use the first element.
后代（）返回一个数组，并插入内容，因此使用第一个元素。
