Question

我有一些简单的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>

我希望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元素的情况下更改DOM元素的位置？
如果（1）的答案为是，那么我该怎么做？

Answer 1

如果你愿意使用jQuery，那么有一个简单的功能。您可以查看以下示例：

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

Answer 2

.removeChild和.appendChild方法实际上并不删除或创建任何内容，它们只是建立并删除节点与其父节点的关联。使用这些方法，您可以完全按照自己的意愿行事 - 移动元素而无需任何开销。

正如.removeChild上的MDN文档所说：

var oldChild = element.removeChild(child)

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

实际上，由于元素只能有一个父元素，因此使用.appendChild和所有其他类似方法会自动将其从以前的位置删除，因此您可以根据需要移动元素而不使用.removeChild。

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

2 个答案: