一、怎樣實現動態添加數據呢？
首先要獲得數據。一般通過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>
效果圖跟第一個效果圖一樣。這里不贅述