使用原型將div從一個div移動到另一個div？

在原型或正常但跨瀏覽器兼容的Javascript中，如何將div的內容移動到另一個div的內容？使用原型將div從一個div移動到另一個div？

div內部是一個帶事件觀察者的id和依賴Javascript代碼的窗體。我不想因爲我在DOM中移動了一個塊而破壞它。「this 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>

當文檔加載什麼也沒有跳來跳去......。

來源

2011-06-13 ʍǝɥʇɐɯ

您可以在BODY標籤的最後補充一點：

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

MacGuffin將自動從一個到另一個移動。
而且不會有任何閃爍。

來源

2011-06-13 10:19:59 Mic

非常感謝。很好地工作，雖然我沒有去BODY標籤，但我在DOM加載方法上選擇了原型。 – 2011-06-13 12:21:46

很高興工作。我不太清楚原型，但如果我記得'$（'there'）。appendChild（$（'MacGuffin'））'也可以。 – Mic 2011-06-13 21:35:04

這真的很棒，比骯髒的CSS技巧好得多 – 2013-04-16 08:13:01

向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： http://ejohn.org/blog/dom-documentfragments/）

來源

2011-06-13 12:08:08 searlea

謝謝你爲我着想。我無法使用簡寫$，但@ Mic的建議運行良好。我能夠使用Prototype在DOM負載上運行，但我很驚訝沒有Prototype解決方案。 – 2011-06-13 12:20:46

向here移動內容爲there，這個工作，只要here圍住要移動的一切，像<div>：

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

後代（）返回一個數組，並且插入件需要的內容，所以使用第一個元素。

來源

2011-09-12 16:09:32

也許不是一個重點，但是沒有Node.migrateChild（）內置的Javascript接口方法。如果一個片段在DOM中的其他地方已經有一個父對象（如上面的示例標記中的div id ='MacGuffin'所示），appendChild（）在重新連接新父對象之前悄悄地從當前父對象中分離參數片段。在我看來，migrateChild（）會比appendChild（）更具語義意義，但對StackOverflow開發人員搜索的需求較少，以暗示其更強大的功能。

來源

2016-01-22 16:57:56 rickatech

https://developer.mozilla.org/en-US/docs/Web/API – rickatech 2016-01-22 17:51:56

使用原型將div從一個div移動到另一個div？

回答

相關問題