Question

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

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

<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>

预先感谢

Answer 1

要更改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/

Answer 2

假设您使用的是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>

Answer 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/

Answer 4

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

只需将div分别包装到包装div中，然后切换类即可更改包装div的伸缩方向

如何在javascript

4 个答案: