Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change div order in javascript

I want to change the div order through JavaScript. i didn't know how to do that

This is the two div which implement in html, but i want div id="navigation" show in html after div class="row subheader".

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

I want like this from javascript please check follow.

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

Thanks in advance


2 Answers

Assuming you're using jQuery, then use this :

$('#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>
like image 94
Sumodh Nair Avatar answered Mar 03 '26 20:03

Sumodh Nair


As you want to change the DOM. First you need to clone the first section and store it in a variable. Then remove the first element from the DOM. And append this element after the 2nd element.

To do so using jQuery

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

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

In JavaScript

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

subHeader[0].after(nav);

Here is the fiddle link https://jsfiddle.net/moshiuramit/xm85h29g/7/

like image 42
moshiuramit Avatar answered Mar 03 '26 20:03

moshiuramit



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!