使用jquery或javascript生成HTML的模板

Question

I am creating a long HTML form with many dynamic elements (added with '+' & '-') and using jquery's .clone() method but i am not very happy with it. what i want is on click of '+', i will just pick the predefined html and replace some parts like 'id/name' and then just append to the existing part. this will make my logic very clean. for example i have below html which i clone on '+' click and append to existing view (which is working fine)

<div class='row'>
  <input id="ip_1" name="ip_1">
  <input date... id="dt_1" name="dt_1">
  <select ... id="sel_1">
  <br>
  <input with text ... id="ip_2">
</div>

what i want is, i will save above html in javascript variable and then just pass the new_id, new_name or other parameters to get new html something like TT2, Jinja2 or Angular does it but i want to keep it light

function x(v, d, s, d2)  = {
  return '<div class='row'>
     <input id="{{ v }}" name="{{ v }}">
     <input date... id="{{ d }}" name="{{ d }}">
     <select ... id="{{ s }}">
     <br>
     <input with text ... id="{{ d2 }}">
  </div>'
}

Any suggestions?

Answer 1

You could let Javascript do all the work for you. The following function picks up the last row within the block then updates the various elements accordingly. The only problem (I'll let you work it out) is that if you can't insert a block between existing blocks.

function x(){
   // get all row elements
   var rows = document.getElementsByClassName('row');
   var last = rows.length - 1;

   //--- get current last element to duplicate
   var clone = rows[last].cloneNode(true);

   //--- get all the inputs with in the duplicate
   var inp = clone.getElementsByTagName('input');
   //-- update all the input elements
   inp[0].id = inp[0].name = IncrementValue(inp[0].id);
   inp[1].id = inp[1].name = IncrementValue(inp[1].id);
   inp[2].id = inp[2].name = IncrementValue(inp[2].id);;
   //--- get the select element
   inp = clone.getElementsByTagName('select');
   inp[0].name = IncrementValue(inp[0].id);
   //--- append all to the main div
   document.getElementsByTagName('body')[0].appendChild(clone);
}
function IncrementValue( str ) {
   var v = str.split('_');
   v[1]++;
   return v.join('_');
}

There is a change to the above script document.getElementsByTagName('body')[0] needss to point the the div container for your inputs. The html needs a button: <button name='add' onclick="x()"> + </button>