MUI框架学习——根据数据库动态生成图文列表

如上所示，在实际开发中，图文列表需要根据后台数量来实现图文列表的添删更改等

现将分享如何实现图文列表的动态添加？
html部分代码：

<div class="mui-content">
	<ul class="mui-table-view" id="active">
				
	</ul>
</div>

js部分代码：

function getList() {
	 document.getElementById("active").innerHTML = " ";
	  mui.ajax(	'http://192.168.43.119/services/appkey_info.php',
	   {type: 'GET',headers: {'Content-Type': 'application/x-www-form-urlencoded'},
		timeout: 10000,
        success: function(resu) {
		             var jo = JSON.parse(resu);
					 for (var i = 0; i < jo.length; i++) {
						  var ul =document.getElementById("active");
						  var li = document.createElement("li");
						  ul.appendChild(li);
						  li.setAttribute("id", jo[i][0]); //给创建的div设置id值；	
						  li.className = "mui-table-view-cell mui-media"; //给创建的div设置class；
						  var img = document.createElement("img");
						  img.className = "mui-media-object mui-pull-left";
						  img.src = "../images/1.jpg";
						  li.appendChild(img);
						  var div = document.createElement("div");
						  div.className = "mui-media-body";
						  li.appendChild(div);
						  div.innerHTML = "钥匙名称：" + jo[i][1];
						  var p = document.createElement("p");
						  div.appendChild(p);
						  p.className = "mui-ellipsis";
						  p.innerHTML = "设备类型：" + jo[i][2] + "\t" + "MAC：" + jo[i][3];
						}
					 }
				});
			} 

重点一：前后端数据交互：
主要思路：通过ajax向后端传递数据，若后端操作执行正常，并能成功向前端返回数据，前端对数据进行操作

success: function(resu) {} 成功返回执行success的回调函数
resu为后端返回回来的值，是一个json数据格式的数组，为json数据

error: function() {}未成功返回，则执行error的回调函数（上述代码无此部分，需要则主动添加）
（本人后端采用了php脚本语言）

var jo = JSON.parse(resu);//将json数据转化为对象

重点二：前端标签动态生成：
主要思路：获得父标签，创建子标签，添加子标签，设置标签的class和id等相关属性。

var li=document.createElement(“li”);//创建元素
ul.appendChild(li);//添加子元素
.setAttribute();//标签元素设置属性
例： li.setAttribute(“id”, jo[i][0]);//设置标签id
.getAttribute();//获取标签元素的相关属性
.className =//设置标签元素的class值
.innerHTML = //设置标签上的内容