set a newly created div on top of the older divs

Question

I have a bunch of divs inside a container. The position of the content divs is relative, because I want them to appear one below the other and their height is unknown.

These divs are created dynamically (appendchild) inside the container div. Now, each div appears on the end (bottom) of the stack but my requirement is that the divs have a "newest first" option too, that is, each new div appears on top, not on bottom of the content divs (if the user selects the "newest first" in the settings).

html:

<div class="container">
    <div id="div1" class="content">aaa<br>aaa</div>
    <div id="div2" class="content">bbb<br><br>bbb</div>
    <div id="div3" class="content">ccc</div>
    <div id="div4" class="content">ddd</div>
</div>

css:

.container {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 1px solid red;
}

.content {
    position: relative;
    top: 0px;
    left: 5px;
    width: 200px;
    height: auto;
    border: 1px solid blue;
    margin: 3px;
}

http://jsfiddle.net/jk559/1/

so I'd like the end-user visible order to be: div4, div3, div2, div1.

How can I achieve this? (css/js)

preferrably no jquery.

thanks in advice!

Why no jquery? Isn't it (as in @sriraman's answer below) often easier and/or neater? — Sinister Beard, Jan 10 '14 at 08:59

score 5 · Answer 1 · answered Jan 10 '14 at 08:59

5

Pure css solution:

Use flexbox to achieve this.

.container {
    display:flex;
    flex-direction:column-reverse;
    justify-content: flex-end;
    align-content: flex-end;
}

Updated fiddle here.

Read more information here.

answered Jan 10 '14 at 08:59

codingrose

15,563
11
39
58

Hiral, thank you very much, this is a very elegant solution. However due to this http://caniuse.com/flexbox and since I'd prefer a cross-browser solution (not even firefox has as of now a full support) I will prefer the insertbefore solution – MirrorMirror Jan 10 '14 at 09:18

score 3 · Answer 2 · answered Jan 10 '14 at 08:58

You can easily do it with JQuery with the following function.

$('.container > div').each(function() {
    $(this).prependTo(this.parentNode);
});

UPDATED FIDDLE

As you mentioned in the question, I will try to attain the expected output with the pure javascript.

score 3 · Accepted Answer · answered Jan 10 '14 at 09:01

3

try this

theParent = document.getElementById("theParent");
theKid = document.createElement("div");
theKid.setAttribute("id","div5");
theKid.setAttribute("class","content");
theKid.innerHTML = 'eee';

// append theKid to the end of theParent
theParent.appendChild(theKid);

// prepend theKid to the beginning of theParent
theParent.insertBefore(theKid, theParent.firstChild);

Demo Fiddle http://jsfiddle.net/jk559/4/

answered Jan 10 '14 at 09:01

Anto Subash

3,140
2
22
30

thank you! That is a crossbrowser solution, and simply javascript, what I was looking for! – MirrorMirror Jan 10 '14 at 09:21

score 2 · Answer 4 · answered Jan 10 '14 at 09:02

2

You can insert content in the beginning simply using .prepend() .

$(".container").prepend("<div id='div5' class='content'>eee</div>");

Demo

answered Jan 10 '14 at 09:02

Md Ashaduzzaman

4,032
2
18
34

score 2 · Answer 5 · answered Jan 10 '14 at 09:03

2

JS FIDDLE UPDATED DEMO

Use prepend() to add as first child of an element

/* $( ".container" ).prepend( "Your div with id here" ); */
/* Example */

 $( ".container" ).prepend( "<div id='div5' class='content' >div5 on top </div>" );

answered Jan 10 '14 at 09:03

Coder

6,948
13
56
86

score 1 · Answer 6 · edited May 23 '17 at 12:14

Take a look at this answer about reordering dom items.

Basically, you have to maintain a state that decides the ordering. When you insert items (see insertItem below) you append or prepend based on the state. When the user selects the newest first option (see newFirst below), you first reverse the dom elements and then flip the state so that subsequent insert happen at the right place.

var newFirst = false;
var list = document.getElementById('my-list');

function newFirst() {      
    var items = list.childNodes;
    var itemsArr = [];
    for (var i in items) {
        if (items[i].nodeType == 1) { // get rid of the whitespace text nodes
            itemsArr.push(items[i]);
        }
    }

    itemsArr.reverse();

    for (i = 0; i < itemsArr.length; ++i) {
      list.appendChild(itemsArr[i]);
    }

    newFirst = !newFirst;
}

function insertItem(content) {
    var item = document.createElement("div");
    item.setAttribute("class","content");
    item.innerHTML = content;

    if(newFirst) {
        list.insertBefore(item, list.firstChild);
    } else {
        list.appendChild(item);
    }
}

score 0 · Answer 7 · answered Jan 10 '14 at 09:24

try this :

$("div[id*=div]").sort(function(a,b){
    if(a.id > b.id) {
        return -1;
    } else {
        return 1;
    }
}).each(function() { 
    var elem = $(this);
    $(".container").append(elem);
});

this will sort your divs inside container like this : div4, div3, div2, div1

if you want change the order to : div1, div2, div3, div4 just change if(a.id > b.id) to if(a.id < b.id)

you can add a link called change order then call this code when you click on it

set a newly created div on top of the older divs

7 Answers7