有了“用JS将一个div插入到指定的一个div中或后面”这篇文章的指引基础，下面还是以情景的模式来叙述怎样用JS做到不刷新加载剩余数据。

案例情景：
一个评论页面，先只显示了10条数据，我要通过js+ajax获取数据无刷新页面异步加载显示下一个10条数据，接着触发一次、显示10条，直到全部显示完整。

解决原理步骤：
1、首先要取得下一个10条评论数据字符串
2、然后将数据赋值到原先10条评论后面
3、同时更新剩余评论数显示、判断如果剩余数少于0则隐藏图标

完整HTML代码：（程序后台代码视情况自处理）

/*
开头说下代码中相应参数含义，不同程序情况会显示不一样，原理是一样的：
$comment_data  前10条评论数据、循环出来，里面具体参数不用管了
{$comment_num}  剩余评论数量

*/
<div id=”comments”>
<ul id=”c1″ class=”comment”>
{foreach from=$comment_data item=comment}
<li>
<p class=”ov”><img width=”30″ height=”30″ src=”{$comment.avatar}” class=”left” /><em>{$comment.username} </em></p>
<p class=”f14″>{$comment.content}</p>
</li>
{/foreach}
</ul>
{if $comment_num > 0}<div><a href=”javascript:void(0);” id=”ajax” class=”ajc b4 mt10″>点击加载更多<span id=”c_num”>{$comment_num}</span>条评论</a></div>{/if}
<input type=”hidden” id=”ajax_num” value=”1″/>
<input type=”hidden” id=”comment_num” value=”{$comment_num}”/>
</div>
<script type=”text/javascript”>
ajax.onclick = function() {
insertEle();//点击加载更多触发事件
}
function insertEle() {
var oTest = document.getElementById(“comments”);//获取评论外围div的id
var ajax_num = document.getElementById(“ajax_num”).value;//获取当前显示到第几页评论数据
var ajax_i = parseInt(ajax_num) + 1;//评论的下一页赋值，第一次加1代表获取第二页数据
var comment_num = document.getElementById(“comment_num”).value;//获取剩余评论数
var comment_i = parseInt(comment_num) – 10;//赋值加载后的剩余评论数

if(comment_num < 0 ){
document.getElementById(‘ajax’).style.display = “none”;//如果剩余评论数为0，直接隐藏返回
return;
}
/*以下3行创建新ul元素*/
var newNode = document.createElement(“ul”);
newNode.id = “c” + ajax_i;
newNode.className = “comment”;

/*以下为获取下一个10条评论数据的ajax处理方法，参考代码、视你的程序情况而定，注意将数据拼成<li>字符串*/
$.getJSON(“comment.php?act=ajax&g_id=” + {$goods_id} + “&page=” + ajax_i,
function(data) {
if (data.error == 0) {
newNode.innerHTML = data.content;//最后拼成的字符串数据
} else {
alert(“已经没有评论了!”)
}
})

var reforeNode = document.getElementById(“c”+ajax_num);
oTest.insertBefore(newNode,reforeNode.nextSibling);//将创建的元素，添加到c_1的后面

if(comment_i <= 0 ){
document.getElementById(‘ajax’).style.display = “none”;//如果加载数据后、剩余评论数少于0，则隐藏按钮
}

document.getElementById(“ajax_num”).value = ajax_i;//更新页数
document.getElementById(“comment_num”).value = comment_i;//更新评论数
document.getElementById(“c_num”).innerHTML = comment_i;//更新评论数显示
}
</script>