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;
}

/

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!

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/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!

• javascript
• css
• html

• Why no jquery? Isn't it (as in @sriraman's answer below) often easier and/or neater? – Sinister Beard Commented Jan 10, 2014 at 8:59
• The relative position doesnt do anything, does it? – z33m Commented Jan 10, 2014 at 9:00

7 Answers 7

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.

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/jk559/4/

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.

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

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

Demo

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>" );

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);
    }
}

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