установить новый созданный div поверх старых divs

Question

У меня есть куча divs внутри контейнера. Позиция div div содержимого относительно, потому что я хочу, чтобы они отображались один под другим, а их высота неизвестна.

Эти divs создаются динамически (appendchild) внутри контейнера div. Теперь каждый div появляется в конце (внизу) стека, но мое требование состоит в том, что у divs также есть «новейшая первая» опция, то есть каждый новый div появляется сверху, а не в нижней части разделов содержимого (если пользователь выбирает «самые новые первые» в настройках).

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/

поэтому я хотел бы видимый порядок конечного пользователя быть: div4, div3, div2, div1.

Как я могу это достичь? (css/js)

предпочтительнее нет jquery.

спасибо за консультацию!

Answer 1

попробовать это

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/

Answer 2

Вы можете легко сделать это с помощью JQuery со следующей функцией.

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

UPDATED FIDDLE

Как вы упомянули в вопросе, я буду стараться, чтобы достичь ожидаемого результата с чистым JavaScript.

Answer 3

Чистый раствор CSS:

flexbox Используйте для достижения этой цели.

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

Updated fiddle here.

Read more information here.

Answer 4

Вы можете вставить содержимое в начало просто используя .prepend().

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

Demo

Answer 5

JS FIDDLE UPDATED DEMO

Использование prepend() добавить в качестве первого ребенка элемента

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

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

Answer 6

Взгляните на эту answer о переназначения элементов DOM.

В принципе, вы должны поддерживать состояние, которое решает заказ.Когда вы вставляете элементы (см. Ниже insertItem), вы добавляете или добавляете на основе состояния. Когда пользователь выбирает самый новый первый вариант (см. Ниже newFirst), вы сначала меняете элементы dom, а затем переворачиваете состояние, чтобы последующая вставка происходила в нужном месте.

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

Answer 7

попробовать это:

$("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); 
}); 

это будет сортировать ваши дивы внутри контейнера, как это: div4, div3, div2, div1

, если вы хотите изменить порядок: div1, div2, div3, div4 просто изменить if(a.id > b.id) к if(a.id < b.id)

вы можете добавить ссылку под названием change order, тогда позвоните по этому коду, когда вы нажмете на нее