JavaScript insertBefore 无法正常工作

Question

试图使我在 this 上的回答更加灵活问题:

function invertDivs(parentDiv) {
  var first = document.getElementById(parentDiv).firstChild;
  console.log(first);
  var second = document.getElementById(parentDiv).lastChild;
  console.log(second);
  document.getElementById(parentDiv).insertBefore(second, first);
}

<div id="parent">
  <div id="first">Div 1</div>
  <div id="second">Div 2</div>
</div>
<button onclick="invertDivs('parent');">Invert Divs</button>

然而，div 只是有时倒置，并非总是如此。

最初点击按钮会在控制台上产生这个:

第二次点击:

多次点击后:

我对代码有什么问题感到困惑。我选择父 div 的第一个 child ，并为最后一个 child 做同样的事情。然后我只是在第一个之前插入当前的第二个 div。函数到此结束。根据 insertBefore 函数的要求，它们也是父 div 的直接子级。

Answer 1

如评论中所述，firstChild 和lastChild 可以返回元素之间空白的文本节点。您可以使用 firstElementChild 和 lastElementChild 来忽略这些。

function invertDivs(parentDiv) {
  var first = document.getElementById(parentDiv).firstElementChild;
  console.log(first);
  var second = document.getElementById(parentDiv).lastElementChild;
  console.log(second);
  document.getElementById(parentDiv).insertBefore(second, first);
}

<div id="parent">
  <div id="first">Div 1</div>
  <div id="second">Div 2</div>
</div>
<button onclick="invertDivs('parent');">Invert Divs</button>

对于旧版浏览器可能需要的一些其他解决方法，请参阅 element.firstChild is returning '<TextNode ...' instead of an Object in FF