Javascript 如何在不创建新元素的情况下修改DOM元素的位置？_Javascript_Dom

Javascript 如何在不创建新元素的情况下修改DOM元素的位置？

javascript dom

Javascript 如何在不创建新元素的情况下修改DOM元素的位置？,javascript,dom,Javascript,Dom,我有一些简单的HTML，如下所示： <body> <form action="#"> <button type="button" onclick="changeDOM();">Change DOM</button> </form> <table> <tr id='a'><td>a</td></tr> <tr id='b'><

我有一些简单的HTML，如下所示：

<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>

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）的答案是肯定的，那么我该怎么做？

如果您愿意使用jQuery，有一个简单的函数可以实现这一点。您可以检查以下示例：

.removeChild

和

.appendChild

方法实际上并不删除或创建任何内容，它们只是建立并删除节点与其父节点的关联。使用这些方法，您将完全按照自己的意愿执行—移动元素而不产生任何开销

正如有关的MDN文档所述：

删除的子节点仍然存在于内存中，但不再是DOM的一部分。你可以稍后在代码中通过oldChild对象重用删除的节点参考资料

实际上，由于元素只能有一个父元素，使用

.appendChild

和所有其他类似的方法将自动将其从以前的位置删除，因此您可以在不使用

.removeChild

的情况下移动元素。

在数字世界中移动的东西不总是复制/删除吗？（除非你只是在引用）。你不想知道什么是最有效的吗？酷。有没有解释为什么我的代码不起作用？我认为意图很清楚，但我不明白为什么给

.nextSibling

属性分配新值失败..nextSibling是只读属性。您应该使用

.insertBefore

方法来实现此效果。请注意，如果您希望重置

currentRow

，则必须使用

currentRow=parentNode.firstElementChild非currentRow=parentNode.firstChild，@Oleg如果你能解释这一点，那也太棒了，但你的回答非常有用。谢谢
var oldChild = element.removeChild(child)