How to change the position of a DIV, changing its order

Question

I'm not talking about floating, nor z-index (which is used to put one above the other). I'm talking about changing the order that a DIV is displayed through Javascript.

For example, I have:

<div id='bottom'></div>
<div id='header'></div>

I want to change the order so the 'header' will be displayed above the 'bottom', but not "overlaying" it, neither "floating". Just:

<div id='header'></div>
<div id='bottom'></div>

It is a simple question that haven't been asked before, I guess.

I'm a little confused on what you are asking. Do you mean the way you insert the html with javascript into the DOM? — Josh Powell, Nov 19 '13 at 20:21
I think this might help you: http://stackoverflow.com/questions/558614/reorder-divs — GreyRoofPigeon, Nov 19 '13 at 20:29

score 0 · Answer 1 · edited May 23 '17 at 12:15

You could work with this Remove element by id where you remove the first one (save it to some variable first) and then append it using appendChild() in JS or append() in jQuery if you're using the framework. That should effectively swap places of the two.

EDIT: Take a look at this it basically is the same question you asked for, with an answer containing code and everything else you might need. Seems like you didn't search good enough.

score 0 · Answer 2 · edited May 23 '17 at 11:59

0

Perhaps this previous answer: Reordering of Divs, which shows a pure-Javascript way and a jQuery way to re-arrange the divs. Googling "rearrange div" also proves fruitful.

edited May 23 '17 at 11:59

Community

1
1

answered Nov 19 '13 at 20:24

bishop

37,830
11
104
139

score 0 · Answer 3 · answered Nov 19 '13 at 20:25

0

It depends on the javascript library you use but if you use jquery, this can easily be done. Just type the following:

var header = $('#header');
$('#bottom').next().remove;
$('#bottom').before(header);

answered Nov 19 '13 at 20:25

Nate

403
4
14

score 0 · Answer 4 · answered Nov 19 '13 at 20:44

0

You can do this with CSS only using flexbox depending on the browsers you want to support. Otherwise you can go for the javascript solution like mentioned by others already.

answered Nov 19 '13 at 20:44

meavo

1,042
1
7
16

How to change the position of a DIV, changing its order

4 Answers4