Как сохранить новые <li>элементы сверху, используя Javascript

Question

Я пытаюсь добавить новые элементы <li> вверху (а не внизу). Я пришел с основным кодом, который использует document.appendChild(). Поскольку нет prependChild(), я не мог придумать, как это сделать.

Вот демо. http://jsfiddle.net/pwpSx/

Как только вы запустите его. Все элементы <li> отображаются как 0,1,2,3,4,5. Но я хочу, чтобы они отображались как

5,4,3,2,1,0 после завершения всех итераций.

Answer 1

Просто используйте простой JavaScript.

list.insertBefore(li,list.firstChild);

Винт jQuery.

Answer 2

Вы можете использовать Node.insertBefore(newElement, referenceElement).

Пример

var els = document.getElementById('els');
var counter = 0;
function newel() {
    var x = document.createElement('li');
    x.innerHTML = "This is really cool : " + counter;
    return x;
}
var si = setInterval(function() {
    els.insertBefore(newel(), els.firstChild);
    counter++;
    if(counter > 5) { 
        clearInterval(si);
    }
},2000);

Answer 3

Если вы не можете использовать функцию JQuery prepend , то вы можете написать свою собственную реализацию, используя просто старый Javascript.В другом ответе предлагается использовать insertBefore, но я бы не советовал использовать этот подход, поскольку он потребовал бы выбора первого li элемента вместо списка.

Вот простое старое решение Javascript:

function prepend(ListID, ListMarkup)
{
    var List = document.getElementByID(ListID);
    List.innerHTML = "<li>" + ListMarkup + "</li>" + List.innerHTML;
}

Answer 4

Я понятия не имею, как реализовать это, используя сырой JS, но вы можете использовать jQuery, который является самым простым способом (IMO) для использования JavaScript. Есть много функций для управления DOM, которые можно найти здесь: http://api.jquery.com/category/manipulation/

Answer 5

Как насчет этого?

var els = document.getElementById('els');
var counter = 5;
function newel() {
    var x = document.createElement('li');
    x.innerHTML = "This is really cool : " + counter;
    return x;
}
var si = setInterval(function() {
    //var cur = els.innerHTML;
    //els.firstChild = newel();
    els.appendChild(newel());
    counter--;
    if(counter < 0) { // exit after few iterations
        clearInterval(si);
    }
},2000);

ИЛИ (Пример)

   // Create The Element Dynamically. Here we are creating  Div   
   var ele=document.createElement("div");
   // Assume our Parent Element  ID is  container
   // So  function  goes like below 
   prependElement('container',ele)

   // ACTUAL  CODE 
   function prependElement(parentID,child)
    {
        parent=document.getElementById(parentID);
        parent.insertBefore(child,parent.childNodes[0]);
    }

Answer 6

Я не знаю, подходит ли вам jquery, но похоже, что вы должны быть в состоянии найти первый li и затем вызвать insertBefore:

http://api.jquery.com/insertBefore/

edit:Глядя на источник для insertBefore, он выглядит нетривиальным для реализации.