How to change div order in javascript

Question

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

Possible duplicate of [jQuery: Add element after another element](https://stackoverflow.com/questions/2244605/jquery-add-element-after-another-element) — SilverSurfer, Aug 09 '18 at 06:54

moshiuramit · Answer 1 · 2018-08-09T07:08:05.447

3

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/

edited Aug 09 '18 at 07:08

answered Aug 09 '18 at 06:48

moshiuramit

115
2
11

Note: This will remove event handlers from the elements you clone. Use `clone(true)` if there are any events bound to it. Also you don't need to clone subheader. – Mark Baijens Aug 09 '18 at 06:50
1

Thanks for your suggestion. – moshiuramit Aug 09 '18 at 07:02

score 3 · Accepted Answer · answered Aug 09 '18 at 07:01

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>

score 2 · Answer 3 · answered Aug 09 '18 at 06:44

How about this?

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

rowSubheader.after(navigation);

You'll have to add an id here though, as I did:

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

https://jsfiddle.net/zmve7xyc/

score 0 · Answer 4 · answered Aug 09 '18 at 19:00

If you are changing the order just for the view consider using Flex css property (after checking browser compatibility). DOM manipulation is an intensive operation and you shouldn't do it until absolute necessity.

Simply wrap both div in a wrapper div and toggle class for changing flex-direction of wrapper div

score 0 · Answer 5 · answered Apr 08 '22 at 03:21

0

You can use appendTo also in JQuery.

Ex :

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

answered Apr 08 '22 at 03:21

Gayan Chinthaka

521
6
5

How to change div order in javascript

5 Answers5