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 target='_blank' 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 target='_blank' 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 target='_blank' 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/
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/
I am coding a php/html page, with some javascript functions. I want to perform an INSERT on my MySQL Database if the result of one of my javascript functions is equal to 1. 01) How can I access the ...
I am coding a php/html page, with some javascript functions. I want to perform an INSERT on my MySQL Database if the result of one of my javascript functions is equal to 1. 01) How can I access the ...
I am trying to make a form where a customer can choose parson and automatically show the cost depend on parson number. So for that, I used jQuery form change function and calculate the cost inside of ...
I am trying to make a form where a customer can choose parson and automatically show the cost depend on parson number. So for that, I used jQuery form change function and calculate the cost inside of ...
I am trying to get some suggestions when I write something in HTML form. Hence,I call a JS function when onkeypress and onkeyup events are triggered on that form. In JS function I am using HTTP ...
I am trying to get some suggestions when I write something in HTML form. Hence,I call a JS function when onkeypress and onkeyup events are triggered on that form. In JS function I am using HTTP ...
I believe I'm wording this question correctly.... I have a dataset like this... [ { "Fri Aug 03 2018 00:00:00 GMT-0500": { "bill": "Test 2", "account": "defaultAccount", "...
I believe I'm wording this question correctly.... I have a dataset like this... [ { "Fri Aug 03 2018 00:00:00 GMT-0500": { "bill": "Test 2", "account": "defaultAccount", "...