javascript动态创建div循环列表

示例1

  1. var noApplicationRecord = document.getElementById('noApplicationRecord')
  3. //模拟数据
  4. var data = [
  5.     { business: '万达影院(万胜广场店)', count: '325', num: '20170012565863565656', time: '2017-10-12 16:30', license: '粤A88888' },
  6.     { business: '麦当劳', count: '111', num: '20170012565863565656', time: '2017-10-12 16:30', license: '粤A99999' },
  7.     { business: '肯德基', count: '456', num: '20170012565863565656', time: '2017-10-12 16:30', license: '粤A45466' }
  8. ]
  9. //绘制单个div
  10. function setDiv(item){
  11.     var div = '<div class="body-no-list"><div class="body-no-list-header" ><div class="body-no-list-header-title">'
  12.         + item.business
  13.         + '</div><div class="body-no-list-header-txt">消费金额:&nbsp;'
  14.         + item.count
  15.         + '元<br>消费单号:&nbsp;'
  16.         + item.num
  17.         + '<br>提交时间:&nbsp;'
  18.         + item.time
  19.         + '</div></div><div class="body-no-list-bottom"><div class="body-no-list-bottom-vehicl">'
  20.         + item.license
  21.         + '</div><div><button>撤销</button><button> 修改</button></div></div></div> '
  22.     return div
  23. }
  24. //循环加载到页面
  25. function getnoApplicationData(){
  26.     var html = ''
  27.     for(var i = 0;i<data.length;i++){
  28.         html += setDiv(data[i])
  29.     }
  30.     noApplicationRecord.innerHTML = html
  31. }
  33.  window.onload = getnoApplicationData()

示例2

  1. 可以用jquery.each来实现
  2. 比如：
  3. $.each(data.comments, function(i, item) {
  4.             $("#content").append(
  5.                     "<div>" + item.id + "</div>" + 
  6.                     "<div>" + item.nickname    + "</div>" +
  7.                     "<div>" + item.content + "</div><hr/>");
  8.         });

示例2

  2. function each(obj) {
  3.     if (obj.constructor==Array) {
  4.         var str = "<ul>";
  5.         for (var i = 0, len = obj.length; i < len; i++) {
  6.             str += "<li>"+each(obj[i])+"</li>";
  7.         }
  8.         str += "</ul>";
  9.         return str;
  10.     }
  11.     if (obj.constructor==Object) {
  12.         var str = "<ul>";
  13.         for (var i in obj) {
  14.             str += "<li>"+i+" : "+each(obj[i])+"</li>";
  15.         }
  16.         str += "</ul>";
  17.         return str;
  18.     }
  19.     return obj;
  20. }
  21. $.getJSON('ajax/test.json', function(obj) {
  22.     $("body").append(each(obj));
  23. });