如何在不破壞javascript的情況下將html從一個div移動到另一個div

我有兩個div用於我的網頁的不同部分，一個工作部分和一個參考部分。一個是固定大小，另一個是可變大小，並且它們是垂直堆疊的。我試圖設計它，以便如果您想在參考窗格中處理某些內容，請單擊一個鏈接並交換兩個窗格之間的所有數據。我的想法是做到以下幾點：如何在不破壞javascript的情況下將html從一個div移動到另一個div

var working = $("#working_pane").html(); 
var ref = $("#reference_pane").html(); 

$("#working_pane").html(ref); 
$("#reference_pane").html(working);

的問題，這是似乎這些窗格內引用任何JavaScript（例如，就位編輯）獲得在開關時壞。沒有JavaScript錯誤發生，只是沒有發生任何事情，就像JavaScript關係被破壞一樣。

有沒有任何移動的HTML而不會打破JavaScript包含？

來源

2010-05-08 KallDrexx

交換兩個div的位置（和/或css類）可能更容易，而不是試圖移動它們的內容。 – Seth 2010-05-08 00:13:19

我看到要做到這一點的唯一方法，因爲兩個窗格都是垂直堆疊的，所以絕對需要定位div，但是如果我整體修改頁面的主頁面/模板，這會讓人討厭。然後我每次更改主頁面時都必須修改div的位置。 – KallDrexx 2010-05-08 00:27:10

當您處理HTML文檔的各個部分時，您應該瞄準與瀏覽器看到的內容（而非HTML字符串）一起使用內部節點對象爲。

要獲取HTML，瀏覽器必須查看節點並將它們串行化爲一個字符串。然後，當您將該HTML分配給文檔的其他部分（使用innerHTML或jQuery html(...)）時，您告訴瀏覽器銷燬之前在元素中的所有內容，並將HTML字符串解析爲新的一組Node對象，並將這些新的節點插入到元素中。

這是緩慢的，浪費的，並失去無法在序列化HTML表示原來的Node對象，如任何方面：

事件處理函數/偵聽器（這就是爲什麼你的編輯們斷裂）
變量引用其他JavaScript代碼具有對節點（也打破腳本）
表單字段值（除，部分地，即，由於一個錯誤）
自定義屬性

因此 - 無論您使用的是jQuery 還是普通的DOM，都不要使用HTML！取出原始節點對象並將它們插入到您想要的位置（它們將離開它們最初自動放置的位置）。引用保持不變，因此腳本將繼續工作。

// contents() gives you a list of element and text node children 
var working = $("#working_pane").contents(); 
var ref = $("#reference_pane").contents(); 

// append can be given a list of nodes to append instead of HTML text 
$("#working_pane").append(ref); 
$("#reference_pane").append(working);

來源

2010-05-08 00:24:19 bobince

成功，有效！ :) – KallDrexx 2010-05-08 00:30:34

這可能是由於重複的id造成的。基本上你可能有一個div中的元素a，它具有id = id1，現在它被存儲在一個var中並被注入到一個新的div中。現在目前看來你沒有機制來確保你沒有同時重複的ID。這可以打破js

因此，看看這個，如果你確保元素首先存儲在一個變種，那麼原件被刪除，然後附加到一個新的位置。

來源

2010-05-08 00:19:04 XGreen

我嘗試在html（）調用.empty（）之前添加2行。同樣的事情仍然發生。通過chrome開發工具檢查元素將顯示具有正確ID的標籤。 – KallDrexx 2010-05-08 00:25:33

如何在不破壞javascript的情況下將html從一個div移動到另一個div

回答

相關問題