Javascript:附加在列表的开头

时间:2012-12-27 07:59:11

标签: javascript jquery html

我的客户端代码从服务器获取一些数据,然后将数据呈现到屏幕上。

'追加'的作用是将最新数据放在列表末尾,而我希望最新数据显示在列表顶部。我正在寻找像之前追加或在开头追加之类的东西。

任何帮助都将不胜感激。

<script>
    for(var i = 0 ; i < data.length; i++){
        $('#uls').append('<li><p>' + data[i].summary + '</p></li>');
    }
</script>

<body>
    <div id="main">
        <ul id="uls"></ul>
    </div>
</body>

6 个答案:

答案 0 :(得分:2)

我认为您正在寻找prepend

您的代码将变为:

<script>
    for(var i = 0 ; i < data.length; i++){
        $('#uls').prepend('<li><p>' + data[i].summary + '</p></li>');
    }
</script>

<body>
    <div id="main">
        <ul id="uls"></ul>
    </div>
</body>

答案 1 :(得分:0)

您可以使用插入指定内容的方法'prepend'作为第一个孩子,如下所示:

<script>
    for(var i = 0 ; i < data.length; i++){
        $('#uls').prepend('<li><p>' + data[i].summary + '</p></li>');
    }
</script>

<body>
    <div id="main">
        <ul id="uls"></ul>
    </div>
</body>

答案 2 :(得分:0)

将innerHTML用于此

document.getElementById('uls').innerHTML="<li><p>"+data[i].summary+"</p></li>"+document.getElementById('uls').innerHTML

答案 3 :(得分:0)

您可以通过两种方式执行此操作.prepend().prependTo()

  1. http://api.jquery.com/prepend/
  2. http://api.jquery.com/prependTo/
  3. 拿这些

    $('#uls').prepend('<li><p>' + data[i].summary + '</p></li>');
    $('<li><p>' + data[i].summary + '</p></li>').prependTo('#uls');
    

答案 4 :(得分:0)

你真的不需要jQuery:

var ul = document.getElementById('uls'); // Get the ul

var li = document.createElement('li'); // Create a <li>
var p = document.createElement('p'); // Create a <p>

li.appendChild(p); // Add the <p> to the <li>
p.appendChild(document.createTextNode(data[i].summary)); // Add the text to the <p>

ul.insertBefore(li, ul.childNodes[0]); // Add the <li> to the first position of the <ul>.

<强> Working Sample

我知道它比jQuery选项更多的代码,但它也更快。

答案 5 :(得分:0)

如果你真的需要使用jQuery,我建议你这样做:

<script>
var i,
    dataMaxIndex,
    ulsContent = "";
dataMaxIndex = data.length - 1;
if (dataMaxIndex >= 0) {
    for (i = dataMaxIndex; i >= 0; i = i - 1) {
        ulsContent = ulsContent + '<li><p>' + data[i].summary + '</p></li>';
    }
    $(document.getElementById('uls')).prepend(ulsContent);
}
</script>

一些代码改进: - 最好使用document.getELementById选择器并将其包装为jQuery - 一次插入所有HTML内容(不是每次迭代);

示例:http://jsfiddle.net/8RLcx/