Question

我正在尝试将新的<li>元素添加到顶部（而不是底部）。我提出了使用document.appendChild()的基本代码。由于没有prependChild()，我无法找到完成任务的方法。

一旦你运行它。所有<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)。

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

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

OR（示例）

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

如何使用Javascript </li>将新的<li>元素保留在顶部

6 个答案: