一、怎样实现动态添加数据呢？
首先要获得数据。一般通过ajax获得数据（参考我写的ajax跨域通信）。之后动态添加数据。
下面我从简单到复杂介绍一下动态添加数据。
例子一：首先编写json数据，然后动态添加数据。
<html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="../H/js/jquery-3.0.0.min.js"></script> </head> <body> <div>博客园老牛大讲堂</div> <!--<ul><li>内容一</li><li>内容二</li><li>内容三</li></ul>--> <ul id="first"> </ul> <script> var data = [{ "name": "老牛大讲堂1" }, { "name": "老牛大讲堂2" }, { "name": "老牛大讲堂3" }, { "name": "老牛大讲堂4" }] var str = "<li>"+data[0].name+"</li><li>"+data[1].name+"</li><li>"+data[2].name+"</li><li>"+data[3].name+"</li>";//内容 $("#first").append(str);//append添加数据 </script> </body> </html>
运行结果：
例子二：下面的例子，我把json数据放到其他文件夹，并且动态的添加若干的数据。
<html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="../H/js/jquery-3.0.0.min.js"></script> </head> <body> <div>博客园老牛大讲堂</div> <ul id="first"> </ul> <script> $.ajax({//这个是ajax请求 url:"data.json", type:"POST", success:function(data){ for(var i=0;i<data.length;i++){//data.length是获取data的长度。for循环 $("#first").append("<li>"+data[i].name+"</li>");//如果添加class或者id内容要加单引号例如：$("#first").append("<li class='a'>"+data[i].name+"</li>"); } } }); </script> </body> </html>
效果图跟第一个效果图一样。这里不赘述