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

Question

我有一个排列脚本，可以在视觉上上下移动元素(例如 li 和 tr 等元素)，但是当元素已经是第一个时，我需要将其制作出来而是出现在底部。我尝试使用正确的元素引用来 appendChild ，但收到错误，因为我要移动的元素已经是其父元素的子元素。我也尝试过使用 insertBefore 但没有任何运气

没有框架。

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

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

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

Answer 1

在父节点上使用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

检查:

• Documentation
• Working example with compressed HTML @JSBin