Question

让我说我有html：

<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>

我将如何在javascript中而不是jquery将这些div重新排序为：

<div id="1">1</div>
<div id="3">3</div>
<div id="2">2</div>

Answer 1

您可以使用display:flex和order css（我必须在您的ID号码之前添加一个字母，因为这样的css似乎不喜欢它）

.container {display:flex; flex-direction:column}
#s1 {order:1;}
#s2 {order:3;}
#s3 {order:2;}

<div class="container">
  <div id="s1">1</div>
  <div id="s2">2</div>
  <div id="s3">3</div>
</div>

More information about order

More information about flex

<强>更新

抱歉读错了这个问题 - 以为你想在没有js的情况下做到这一点

var div = document.getElementById('3')

div.parentNode.insertBefore(div, document.getElementById('2'))

      <div id="1">1</div>
      <div id="2">2</div>
      <div id="3">3</div>

Answer 2

重复问题给出的解决方案是不正确的，因为它们假设元素彼此相邻。但即使在这个简单的例子中，也有一个文本节点在元素之间包含空格。

鉴于这两个元素没有嵌套，您可以使用它来交换两个元素：

function swapElements (first, second) {
    var tmpNode = document.createElement('div');
    tmpNode.setAttribute('id', '_tmp');

    var firstParent = first.parentNode;
    firstParent.insertBefore(tmpNode, first);
    second.parentNode.insertBefore(second, first);
    firstParent.insertBefore(second, tmpNode);
    firstParent.removeChild(tmpNode);
}

使用它像：

var first = document.querySelector('#1');
var second = document.querySelector('#2');
swapElements(first, second);

在没有jquery的情况下在javascript中重新排序div

2 个答案: