`element.next().insertBefore(element)` 有什么作用？答案

【问题标题】：What does `element.next().insertBefore(element)` do?`element.next().insertBefore(element)` 有什么作用？
【发布时间】：2015-11-07 03:29:58
【问题描述】：

我一定遗漏了一些非常简单的东西，但我不确定它是什么。

来自this answer 我们有代码：

app.directive('createTable', function ($compile) {
    return {
        link: function(scope, element, attrs) {
            if (element.next().length) {
                element.next().insertBefore(element);
            }

            var contentTr = angular.element('<tr><td>test</td></tr>');
            contentTr.insertAfter(element);
            $compile(contentTr)(scope);
        }
    }
});

目标是在ng-repeat 指令内的每个元素之后插入一些内容。

这部分有什么作用？

            if (element.next().length) {
                element.next().insertBefore(element);
            }

我把它读成：“如果有一个元素，X，在element 之后，然后在X 之前粘贴element”。然而，情况似乎已经如此。

它显然做了一些事情，因为如果我删除这三行，所有元素都会添加到 tbody 的末尾，而不是被穿插。请参阅 jsfiddle of the working version 和 the jsfiddle when it's commented out。

【问题讨论】：

标签： javascript jquery html angularjs dom

【解决方案1】：

.next():

获取集合中每个元素的紧随其后的兄弟匹配的元素。如果提供了选择器，它将检索下一个仅当它与该选择器匹配时才为兄弟。

insertBefore():

在目标之前插入匹配元素集中的每个元素。

因此，$element.next().insertBefore($element) 将 $element 与其下一个兄弟交换。

【讨论】：

我可能没有正确解析这个。 X 不会总是在X.next() 之前吗？ element 在这种情况下始终是一个元素。
哦，哈哈，我明白了。我误解了X.insertBefore(Y) 在X 之前坚持Y，而不是在Y 之前坚持X。

【解决方案2】：

它获取下一个元素并将其重新定位在当前元素之前。这是一个演示：

<!DOCTYPE html>
<html>
  <head>
    <title>Demo</title>
    <meta charset="utf-8">
    <style>
      #div1 { background-color: gray; }
      #div2 { background-color: red; }
      #div3 { background-color: blue; }
      #div4 { background-color: green; }
    </style>
  </head>
  <body>

    <div id="div1">Div 1</div>
    <div id="div2">Div 2</div>
    <div id="div3">Div 3</div>
    <div id="div4">Div 4</div>

    <button id="btn">Rearrange</button>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
      $('#btn').on('click', function(e){
        var element = $('#div1');
        if (element.next().length) {
          element.next().insertBefore(element);
        }
      });
    </script>

  </body>
</html>

【讨论】：