1

我有一些看起来像这样的简单 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并没有像我预期的那样设置。我在网上看到了一些类似的代码，但它们实际上是删除节点并附加它们。两个问题：

  1. 有没有办法在不创建和销毁它们的情况下改变 DOM 元素的位置？

  2. 如果 (1) 的答案是肯定的，那么我该怎么做？

4

2 回答 2

0

.removeChild和.appendChild方法实际上并不删除或创建任何东西，它们只是建立和删除节点与其父节点的关联。使用这些方法，您将完全按照您的意愿进行操作 - 无需任何开销即可移动元素。

正如 MDN 文档.removeChild所说：

var oldChild = element.removeChild(child)

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

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

于 2012-08-07T14:55:33.990 回答
0

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

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

于 2012-08-07T13:48:07.257 回答