Javascript 在HTML中动态添加行

这是我经过大量研究后得到的，所以尽管我将与大家分享

请让我知道，如果我可以优化它更多。 此代码在单击添加行时添加新行，并动态分配id和名称

        <script type="text/javascript">
        $(document).ready(function(e) {
        //n:variable for generating dynamic values
        var n=1;
        $("#add").click(function() {    
        n++;

       // converting HTML to JS readable format
       var strVar="";
       strVar += "<tr>";
       strVar += "        <td id=\"day\">Day ";
       strVar += n;
       strVar +=" <\/td>";
       strVar += "        <td><textarea name=\"" ;
       strVar += n;
       strVar +="\"cols=\"50\" rows=\"10\" id=\"" 
       strVar += n;
       strVar +="\"><\/textarea><\/td>";
       strVar += "      <\/tr>";

     $(strVar).insertAfter("#mytable tr:nth-last-child(3)");
             document.getElementById("h").value= n;     
             return false;
             });

      });

   </script> 

$（文档）.ready（函数（e）{
//n：用于生成动态值的变量
var n=1；
$（“#添加”）。单击（函数（）{
n++；
//将HTML转换为JS可读格式
var strVar=“”；
strVar+=“”；
strVar+=“天”；
strVar+=n；
strVar+=“”；
strVar+=“”；
strVar+=“”；
$（strVar）.insertAfter（#mytable tr:nth last child（3）”；
document.getElementById（“h”）.value=n；
返回false；
});
});

HTML

第一天
再加一天

documentfragment用于创建快速dom节点

var f=document.createDocumentFragment();
for(var a=0;a<5;a++){
 var field=document.createElement('td');
 field.textContent='field '+a;
 f.appendChild(field);
}
yourTable.appendChild(document.createElement('tr')).appendChild(f);

var f=document.createDocumentFragment（）；
对于（var a=0；a为什么不直接在
tr
中添加
td
？因为documentfragment是用来创建快速dom节点的为什么应该更快？测试它jsperf或console.time（）.为什么要慢一点呢？我更喜欢快一点的网站。不管怎样，我发布了两个我喜欢的解决方案。你可以选择任何你想要的。好吧，我问的是为什么，而不是你如何证明它。另外，我认为不同的浏览器不一样。
var f=document.createDocumentFragment();
for(var a=0;a<5;a++){
 var field=document.createElement('td');
 field.textContent='field '+a;
 f.appendChild(field);
}
yourTable.appendChild(document.createElement('tr')).appendChild(f);

var tr='<tr><td>field '+['1','2','3','4','5'].join('</td><td>field ')+'</td></tr>';