JavaScript 将节点移动到 lastChild 之后的位置

JavaScript move node to position after lastChild

本文关键字：之后 位置 lastChild 节点 移动 JavaScript      更新时间：2023-09-26

我有一个排列脚本，可以在视觉上向上或向下移动元素（li 和 tr 等元素），但是当元素已经是第一个时，我需要让它出现在底部。我尝试使用正确的元素引用appendChild但得到一个错误，因为我正在移动的元素已经是其父元素的子元素。我也尝试使用insertBefore没有任何运气

没有框架。

那么假设我们s_parent了父元素，我们想移动子元素s_move并且s_parent有四个子tr元素，我们如何在s_parent.lastChild之后移动s_move？

var s_parent = document.getElementsByTagName('table')[0];
var s_move = t.getElementsByTagName('tr')[0];

在父节点上使用 Node.appendChild 方法：

s_parent.appendChild(s_move);

这将在父节点的最后一个子节点之后添加您的元素。

很高兴知道：

当使用vanilla JS操作DOM元素时，请注意模板系统或通过HTML标记中的手动缩进生成的可能文本节点。

压缩标记： <ul><li></li><li></li></ul>

  • ul.firstChild是第一个li
  • 第一个li.nextSibling是第二个li

但缩进标记：<ul> <li> </li> <li> </li> </ul>

  • ul.firstChild #textNode
  • 第一个li.nextSibling是#textNode

检查：

  • 文档
  • 压缩 HTML @JSBin的工作示例

你需要：https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild

在您的情况下：

s_parent.appendChild(s_move);

从文档中：

Node.appendChild（） 方法将节点添加到指定父节点的子节点列表的末尾。如果给定的子节点是对文档中现有节点的引用，则 appendChild（） 会将其从当前位置移动到新位置。

相关文章：