JavaScript insertBefore不能正常工作

Question

试图让我的答案在这个问题上更加灵活:

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的第一个孩子,并为最后一个孩子做同样的事情.然后我只是在第一个div之前插入当前的第二个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返回'<TextNode ...'而不是FF中的对象