我的客户端代码从服务器获取一些数据,然后将数据呈现到屏幕上。
'追加'的作用是将最新数据放在列表末尾,而我希望最新数据显示在列表顶部。我正在寻找像之前追加或在开头追加之类的东西。
任何帮助都将不胜感激。
<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>
答案 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()
:
拿这些
$('#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内容(不是每次迭代);