I am trying to add new <li> elements to the top (instead of at the bottom). I have e up with basic code which makes use of document.appendChild(). Since there is no prependChild() I couldn't figure out a way to get it done.

Here is the demo. /

Once you run it. All <li> elements appear as 0,1,2,3,4,5 . But, i want them to be displayed as

5,4,3,2,1,0 after all iterations are plete.

I am trying to add new <li> elements to the top (instead of at the bottom). I have e up with basic code which makes use of document.appendChild(). Since there is no prependChild() I couldn't figure out a way to get it done.

Here is the demo. http://jsfiddle/pwpSx/

Once you run it. All <li> elements appear as 0,1,2,3,4,5 . But, i want them to be displayed as

5,4,3,2,1,0 after all iterations are plete.

• javascript
• dom

6 Answers 6

Just use plain JavaScript.

list.insertBefore(li,list.firstChild);

Screw jQuery.

You can use Node.insertBefore(newElement, referenceElement).

Example

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

I don't know if jquery is an option for you, but looks like you should be able to find the first li and then call insertBefore:

http://api.jquery./insertBefore/

edit: Looking at the source for insertBefore, it looks nontrivial to implement.

How about this ?

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

OR (Example)

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

I have no idea how to implement it using raw JS, nut you could use jQuery which is the easiest way (IMO) to use JavaScript. There are many functions to manipulate DOM which can be found here: http://api.jquery./category/manipulation/

If you can't use JQuery's prepend function, then you can write your own implementation using just plain old Javascript. Another answer suggests using insertBefore, but I would advise against using this approach since it would require selecting the first li element instead of the list.

Here's a plain old Javascript solution:

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