前端自动化——用js动态生成html页面

首先思路明确：生成的元素是一个完整的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);