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
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>
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With