如何保持新的使用 Javascript 的顶部元素

Question

我正在尝试将新的

元素添加到顶部（而不是底部）。我已经提出了使用 document.appendChild() 的基本代码。由于没有 prependChild() 我无法找到一种方法来完成它。

这是演示。 http://jsfiddle.net/pwpSx/

运行后。所有

元素均显示为 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 是否适合您，但看起来您应该能够找到第一个 li，然后调用 insertBefore：

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

编辑：查看 insertBefore 的源代码，它看起来实现起来并不简单。

Answer 4

这个怎么样？

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 5

我不知道如何使用原始 JS 来实现它，但你可以使用 jQuery，这是使用 JavaScript 的最简单方法（IMO）。
有很多操作 DOM 的函数可以在这里找到：
http://api.jquery.com/category/manipulation/

Answer 6

如果您无法使用 JQuery 的 prepend 函数，那么您可以使用普通的旧 Javascript 编写自己的实现。另一个答案建议使用 insertBefore，但我建议不要使用这种方法，因为它需要选择第一个 li 元素而不是列表。

这是一个简单的旧 Javascript 解决方案：

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