模板化使用jquery或javascript生成html

templatization using jquery or javascript to generate html

本文关键字：javascript 生成 html jquery      更新时间：2023-09-26

我正在创建一个长HTML表单，其中包含许多动态元素(添加'+' &'-')和使用jquery的.clone()方法，但我不是很满意。我想要的是点击'+'，我会选择预定义的HTML，并替换一些部分，如'id/name'，然后只是附加到现有的部分。这将使我的逻辑非常清晰。例如，我有下面的HTML，我克隆'+'点击并附加到现有的视图(这是工作良好)

<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>

我想要的是，我将把上面的html保存在javascript变量中然后只传递new_id, new_name或其他参数来获得新的html TT2, Jinja2或Angular会这样做，但我想保持它轻

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>'
}

有什么建议吗?

你可以让Javascript为你做所有的工作。下面的函数选取块中的最后一行，然后相应地更新各个元素。唯一的问题(我会让你自己解决)是，如果你不能在现有的块之间插入一个块。

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('_');
}

对上面的脚本document.getElementsByTagName('body')[0]进行了更改，需要为您的输入指向div容器。html需要一个按钮:<button name='add' onclick="x()"> + </button>

相关文章：