如何在不創建新元素的情況下修改DOM元素的位置？

我有一些簡單的HTML，看起來像這樣：如何在不創建新元素的情況下修改DOM元素的位置？

<body> 
    <form action="#"> 
    <button type="button" onclick="changeDOM();">Change DOM</button> 
    </form> 
    <table> 
    <tr id='a'><td>a</td></tr> 
    <tr id='b'><td>b</td></tr> 
    <tr id='c'><td>c</td></tr> 
    </table> 
</body>

我想changeDOM功能推表最上面一行是底排和「泡沫式」的行的其餘部分。我試圖做這樣的：

function changeDOM() { 
    var nextRow = currentRow.nextSibling; 
    currentRow.className=''; 
    nextRow.nextSibling = currentRow; 
    currentRow = nextRow; 
    currentRow.className='highlight'; 
    return true; 
} 

var currentRow; 
currentRow = document.getElementById('a'); 
currentRow.className='highlight';

不幸的是，我通過調試踩，我注意到nextSibling沒有得到設置爲我的預期。我在網上看到過一些類似的代碼，但他們實際上刪除了節點並追加它們。兩個問題：

有沒有辦法來改變DOM元素的位置，而無需創建和銷燬它們呢？
如果（1）的答案是肯定的，那麼我該怎麼做？

來源

2012-08-07 Avery

是不是在數字世界中移動東西總是複製/刪除？（除非你只是參考）。你不是隻想要最高效的？ – Niklas 2012-08-07 13:38:10

.removeChild和.appendChild方法並不會真正刪除或創建任何東西，他們只是建立和消除與其父節點的關聯。使用這些方法，您可以完全按照您的要求進行操作 - 移動元素而無需任何開銷

由於MDN文檔上.removeChild說：

var oldChild = element.removeChild(child)

刪除的子節點仍然存在於內存中，但DOM的不再一部分。您可能在以後的代碼中通過oldChild對象引用重新使用已刪除的節點。

實際上，因爲元素只能有一個父，使用.appendChild和所有其他類似的方法將自動從先前的位置刪除它，這樣你就可以在不使用.removeChild在各地移動的元素。

來源

2012-08-07 14:55:33

很酷。有沒有解釋爲什麼我的代碼不起作用？我認爲這個意圖非常清楚，但我爲什麼爲'.nextSibling'屬性賦值而失敗。 – Avery 2012-08-08 00:05:39

.nextSibling是一個只讀屬性。你應該使用'.insertBefore'方法來達到這個效果。 – 2012-08-08 06:11:29

作爲對任何好奇的人的一個提示，如果你想重置currentRow，你必須使用currentRow = parentNode.firstElementChild;如果你可以解釋這個，就不要使用currentRow = parentNode.firstChild;太棒了，但你的回答很有幫助。謝謝！ – Avery 2012-08-08 08:20:50

如果你願意使用jQuery，有一個簡單的函數來做到這一點。您可以查看下面的例子：

http://api.jquery.com/detach/

來源

2012-08-07 13:48:07

如何在不創建新元素的情況下修改DOM元素的位置？

回答

相關問題