如何在javascript中更改div顺序答案

【问题标题】：How to change div order in javascript如何在javascript中更改div顺序
【发布时间】：2019-01-16 12:28:59
【问题描述】：

我想通过 JavaScript 更改 div 的顺序。我不知道该怎么做

这是在 html 中实现的两个 div，但我希望 div id="navigation" 在 div class="row subheader" 之后显示在 html 中。 p>

<div id="navigation">
  <div class="item" style="display:inline;">
    <a href="index.html">Home</a>
  </div>
  <div class="item" style="display:inline;">Blog: Kannu</div>
</div>

<div class="row subheader">
  <div class="container">
    <div id="blogsubheader">My Blog</div>
  </div>
</div>

我想要这样的 javascript 请检查关注。

<div class="row subheader">
  <div class="container">
    <div id="blogsubheader">My Blog</div>
  </div>
</div>

<div id="navigation">
  <div class="item" style="display:inline;">
    <a href="index.html">Home</a>
  </div>
  <div class="item" style="display:inline;">Blog: Kannu</div>
</div>

提前致谢

【问题讨论】：

你想达到什么目的？为什么需要 js？
jQuery: Add element after another element的可能重复

标签： javascript jquery css

【解决方案1】：

假设你使用的是 jQuery，然后使用这个：

$('#navigation').insertAfter( ".container" );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="navigation">
            <div class="item" style="display:inline;">
                        <a href="index.html">Home</a>
           </div>
    <div class="item" style="display:inline;">Blog: Kannu</div>
 </div>


  <div class="row subheader">
  <div class="container">
   <div id="blogsubheader">My Blog</div>
  </div>
 </div>
</body>
</html>

【讨论】：

【解决方案2】：

因为你想改变 DOM。首先，您需要克隆第一部分并将其存储在变量中。然后从 DOM 中删除第一个元素。并将此元素附加到第二个元素之后。

使用 jQuery 来做到这一点

var nav = $('#navigation').clone(true);

$('#navigation').remove();
nav.insertAfter('.subheader');

在 JavaScript 中

var nav = document.getElementById('navigation');
var subHeader = document.getElementsByClassName('subheader');

subHeader[0].after(nav);

这里是小提琴链接https://jsfiddle.net/moshiuramit/xm85h29g/7/

【讨论】：

注意：这将从您克隆的元素中删除事件处理程序。如果有任何事件绑定到它，请使用clone(true)。你也不需要克隆子标题。
感谢您的建议。

【解决方案3】：

这个怎么样？

var navigation = document.getElementById('navigation');
var rowSubheader = document.getElementById('row-subheader');

rowSubheader.after(navigation);

不过，您必须像我一样在此处添加一个 id：

<div class="row subheader" id="row-subheader">

https://jsfiddle.net/zmve7xyc/

【讨论】：

【解决方案4】：

如果您只是为了视图更改顺序，请考虑使用Flex css property（在检查浏览器兼容性之后）。 DOM 操作是一项密集的操作，除非绝对必要，否则您不应该这样做。

只需将两个 div 包装在一个包装器 div 和切换类中以更改包装器 div 的 flex-direction

【讨论】：