首先思路明確：生成的元素是一個完整的DOM對象；這些DOM對象的屬性可以是字符串，xml文件，也可以是json格式的數據，存儲在后臺或者其它位置；通過層層解析，順著DOM層級關系動態創建在html文檔流中；這些html文檔放于不同的模板文件中相應生成不同樣式的效果。

以下就json格式存儲的數據，簡單示例一下：

第一步：獲取attribute數據

var url = window.android.getCurrentDataUrl(); var data = window.android.getDataBody(url); var dataJson = JSON.parse(data); var jsonData = JSON.parse(dataJson['data']); var jsonData = [] //自主創建（可選）

第二步：創建元素類數據并分別解析

$(function () {//alert(url);var cls = {};AnalyJson(jsonData, cls, data_toggle, $('#main')); }); //創建JSON解析函數 function AnalyJson(data,cls,data_toggle,div){if('id' in data){AnalyJson(data.values,cls,data_toggle,div);}else{if('name' in data){CreateInputViewer(data.name,cls,data_toggle,div);AnalyJson(data.values,cls,data_toggle,div);}else{if('type' in data){CreateInputViewer(data,cls,data_toggle,div);}else{ for(var p in data){CreateInputViewer(data[p],cls,data_toggle,div);}}}} //針對不同的解析情況，調用下邊函數 function CreateInputViewer(data,cls,data_toggle,div){attr = {};//alert(data.type);switch(data.type){case 'text':{//alert(attr['name']); CreateInput(data,cls.text,data_toggle.text,div);break;}case 'radio':{//alert(attr['name']); CreateRadio(data,cls.radio,data_toggle.radio,div);break;}case 'select':{//alert(attr['name']); CreateSelect(data,cls.select,data_toggle.select,div);break;}case 'checkbox':{//alert(attr['name']); CreateCheckBox(data,cls.checkbox,data_toggle.checkbox,div);break;}case 'photo':{CreatePhoto(data,cls,data_toggle,div);//alert("takePhoto");break;}case 'gps' :{CreateLocation(data,cls,data_toggle,div);break;}default:{CreateKeyValue(data,attr,div);}} } //封裝一個用于存儲ＤＯＭ屬性的函數 function GetAttr(p,cls,data_toggle){var attr={};if(p in cls){attr["class"]=cls[p];}if(p in data_toggle){attr["data-toggle"]=data_toggle[p];}return attr; }

最后一步：根據不同的ＤＯＭ對象，創建不同對象

function CreateInput(data,cls,data_toggle,div){var attr1=GetAttr("p1",cls,data_toggle);var row = $('<div/>').attr(attr1);var attr2=GetAttr("p2",cls,data_toggle);attr2['name']=data.key;attr2['placeholder']=data.keyname;attr2['type']='text';var input= $('<input />').attr(attr2);row.append(input);div.append(row); }function CreateLocation(data,cls,data_toggle,div){var attr1=GetAttr('p1',cls.button,data_toggle.button);var row= $('<div />').attr(attr1);var spattr=GetAttr('sp',cls.button,data_toggle.button);var span=$('<span/>').attr(spattr);span.append(data.keyname+":");var btnattr=GetAttr('p2',cls.button,data_toggle.button);btnattr['id']=data.key;btnattr['name']=data.key;btnattr['onclick']="takeLocation(this.name)";var button = $('<button />').attr(btnattr);button.html('獲取定位');row.append(button);div.append(row); }function CreateButton(data,cls,data_toggle,onclick,div){var attr1=GetAttr('p1',cls,data_toggle);var row= $('<div />').attr(attr1);var spattr=GetAttr('sp',cls,data_toggle);var span=$('<span/>').attr(spattr);span.append(data.keyname+":");var btnattr=GetAttr('p2',cls,data_toggle);btnattr['name']=data.key;//btnattr['onclick']=onclick.onclick;btnattr['onclick']=SetScanToActive();var button = $('<button />').attr(btnattr);button.html(data.value);row.append(button);div.append(row); }function CreateImage(data,cls,data_toggle,div){var attr1=GetAttr('p1',cls,data_toggle);var row= $('<div />').attr(attr1);var imgattr=GetAttr('p2',cls,data_toggle);imgattr['id']=data.key;imgattr['height']="70";imgattr['width']="100";var img = $('<img />').attr(imgattr);row.append(img);div.append(row); }function CreatePhoto(data,cls,data_toggle,div){var attr1=GetAttr('p1',cls.button,data_toggle.button);var row= $('<div />').attr(attr1);var spattr=GetAttr('sp',cls.button,data_toggle.button);var span=$('<span/>').attr(spattr);span.append(data.keyname+":");var btnattr=GetAttr('p2',cls.button,data_toggle.button);btnattr['name']=data.key;btnattr['onclick']="takePhoto(this.name)";var button = $('<button />').attr(btnattr);button.html("拍照");row.append(button);div.append(row);var attr=GetAttr('p1',cls.img,data_toggle.img);var imgrow= $('<div />').attr(attr);//..var imgattr=GetAttr('p2',cls.img,data_toggle.img);imgattr['id']=data.key;imgattr['height']="70";imgattr['width']="100";var img = $('<img />').attr(imgattr);imgrow.append(img);div.append(imgrow); }function CreateRadio(data,cls,data_toggle,div){var attr1=GetAttr('p1',cls,data_toggle);var row = $('<div />').attr(attr1);var spattr=GetAttr('sp',cls,data_toggle);var span=$('<span/>').attr(spattr);span.append(data.keyname+':');row.append(span);var attr2=GetAttr('p2',cls,data_toggle);var attr3=GetAttr('p3',cls,data_toggle);attr3['name']=data.key;attr3['type']=data.type;for(var json in data.values){var label=$('<label />').attr(attr2);attr3['value'] = data.values[json].key;var input= $('<input />').attr(attr3);label.append(input);label.append(data.values[json].value);row.append(label);}div.append(row); }function CreateSelect(data,cls,data_toggle,div){var attr1=GetAttr('p1',cls,data_toggle);var row=$('<div />').attr(attr1);var spattr=GetAttr('sp',cls,data_toggle);var span=$('<span />').attr(spattr);span.append(data.keyname+':');row.append(span);var attr2=GetAttr('p2',cls,data_toggle);attr2['name'] = data.key;var select=$('<select />').attr(attr2);var attr3=GetAttr('p3',cls,data_toggle);for(var option in data.values){attr3['value']=data.values[option].key;var opt = $('<option />').attr(attr3);opt.html(data.values[option].value);select.append(opt);}row.append(select);div.append(row); }function CreateCheckBox(data,cls,data_toggle,div){var attr1=GetAttr('p1',cls,data_toggle);var row=$("<div />").attr(attr1);var spattr=GetAttr('sp',cls,data_toggle);var span=$('<span />').attr(spattr);span.append(data.keyname+':');row.append(span);var attr2=GetAttr('p2',cls,data_toggle);var attr3=GetAttr('p3',cls,data_toggle);attr3['name']=data.key;attr3['type']='checkbox';for(var checkbox in data.values){var label=$("<label />").attr(attr2);attr3['value'] = data.values[checkbox].key;var input=$("<input />").attr(attr3);label.append(input);label.append(data.values[checkbox].value);row.append(label);}div.append(row); } function CreateKeyValue(data,attr,div){if(data.key)div.append($('<div class="row"/>').append(data.key+':'+data.value+' '));else{div.append($('<div class="row"/>').append(data));} } function CreatePhotoFromAndroid(data){var jsonObject = JSON.parse(data);//alter(jsonObject.id);//alter(jsonObject.data);$('#'+jsonObject.id).attr({"src":jsonObject.data}); }function CreateLocationFromAndroid(data,cls,data_toggle){var jsonObject = JSON.parse(data);var attr1=GetAttr("p1",cls,data_toggle);var row = $('<div/>').attr(attr1);var attr2=GetAttr("p2",cls,data_toggle);attr2['name']="longitude";attr2['placeholder']="經度";attr2['type']='text';attr2['value']=jsonObject.longitude;var input= $('<input />').attr(attr2);var id = jsonObject.id;$('#'+id).after(row.append(input));var attr3=GetAttr("p2",cls,data_toggle);attr3['name']="latitude";attr3['placeholder']="緯度";attr3['type']='text';attr3['value']=jsonObject.latitude;var linput= $('<input />').attr(attr3);var lrow = $('<div/>').attr(attr1);$('#'+id).after(lrow.append(linput));//var lrow = $('<div class="row" />');//var linput = $('<input />');//linput.attr({"name":"latitude","value":jsonObject.latitude,"placeholder":"緯度"});//lrow.append("緯度");//input.attr({"name":"altitude","value":jsonObject.altitude,"placeholder":"高程"});//$('#'+id).after(row.append(input));//input.attr({"name":"address","value":jsonObject.address,"placeholder":"地址"});//$('#'+id).after(row.append(input)); }function SetScanToActive(result){//alert($(document.activeElement).val(result));$(document.activeElement).val(result); }

總結

以上是生活随笔為你收集整理的用js动态生成html页面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。