如何动态创建下面的htm代码

Question

我需要动态生成以下代码

<div class="app" style="display:none">
    <input id="application" type="radio" name="choice" value="Albert">
    <label>Albert</label>
    <input id="application" type="radio" name="choice" value="Huston">
    <label>Huston</label>
</div>
<div class="marks" style="display:none">
    <input id="subject" type="radio" name="choice" value="ten">
    <label>10</label>
    <input id="subject" type="radio" name="choice" value="twelve">
    <label>12</label>
</div>

要动态添加标签之间的类，标识，值和字符串。我将从for循环中获取这些值，我正在迭代表中的行。请帮忙。

Answer 1

也许是这样的：

＆＃13;

＆＃13;

   var first={
   	    class:'app',
   	    id:'application',
   	    values:[['Albert', 'Albert'],['Huston', 'Huston']]
   };

   var second={
   	    class:'marks',
   	    id:'subject',
   	    values:[['ten', 10],['twelve', 12]]
   };

  function add_dynamic_al(_obj){
  	  var div=$('<div/>');
  	  div.addClass(_obj.class);
  	  //div.hide();  //if need  display:none

  	  var lbl1=$('<label/>');

  	  var inp1=$('<input/>');
  	  inp1.attr({'id':_obj.id, 'type':'radio', name:'choice',}).val(_obj.values[0][0]);

  	  lbl1.append(inp1).append(_obj.values[0][1]);  //for structure '<label><input />name</label>'

  	  div.append(lbl1);

  	  var lbl2=$('<label/>');

  	  var inp2=$('<input/>');
  	  inp2.attr({'id':_obj.id, 'type':'radio', name:'choice',}).val(_obj.values[1][0]);

  	  lbl2.append(inp2).append(_obj.values[1][1]);

  	  div.append(lbl2);

  	  $('body').append(div);

  }

＆＃13;

       div{
       	 display:inline-block;
       	 border-style:solid;
       	 border-width:2px;
       	 border-color:gray;
       	 padding:10px;
       }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


   <input type="button" value="add first element" onclick="add_dynamic_al(first);" />
   <input type="button" value="add second element" onclick="add_dynamic_al(second);" />

＆＃13;

＆＃13;

＆＃13;

Answer 2

也许这就是你需要的：

    var my_obj=[{
   	    class:'app',
   	    id:'application',
   	    values:[['Albert', 'Albert'],['Huston', 'Huston']]
     },{
   	    class:'marks',
   	    id:'subject',
   	    values:[['ten', 10],['twelve', 12]]
     }];





  function create_dynamic_el_from_obj_arr(_obj_arr){
  	   for(var key in _obj_arr){
  	   	      var cur_el=_obj_arr[key];
   	          var div=$('<div/>');
  	          div.addClass(cur_el.class);
  	          //div.hide();  //if need  display:none
  	          var cur_el_values=_obj_arr[key].values;
  	          for(var kv in cur_el_values){
  	          	   var lbl=$('<label/>');
  	          	   var inp=$('<input/>');
  	          	   inp.attr({'id':cur_el.id, 'type':'radio', name:'choice',}).val(cur_el_values[kv][0]);
  	          	   lbl.append(inp).append(cur_el_values[kv][1]);
  	          	   div.append(lbl);
  	          }
  	          $('body').append(div);

  	   }
  }

       div{
       	 display:inline-block;
       	 border-style:solid;
       	 border-width:2px;
       	 border-color:gray;
       	 padding:10px;
       }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


      <input type="button" value="add all element" onclick="create_dynamic_el_from_obj_arr(my_obj);" /><br/>