JavaScript在单击时添加新的输入字段

我有一个JavaScript代码，它当前在一个表中添加新的文本区域、输入等，并在每个id/名称上添加一个唯一的数字

var i=1;
function addRow() {
          var tbl = document.getElementById('table1');
          var lastRow = tbl.rows.length;
          var iteration = lastRow - 1;
          var row = tbl.insertRow(lastRow);

          var descriptionCell = row.insertCell(0);
          var elDescription = document.createElement('textarea');
          elDescription.type = 'textarea';
          elDescription.name = 'description' + i;
          elDescription.id = 'description' + i;
          elDescription.cols = 70;
          elDescription.rows = 2;
          descriptionCell.appendChild(elDescription);

          var unitpriceCell = row.insertCell(1);
          var elUnitPrice = document.createElement('input');
          elUnitPrice.type = 'text';
          elUnitPrice.name = 'unitprice' + i;
          elUnitPrice.id = 'unitprice' + i;
          elUnitPrice.size = 20;
          unitpriceCell.appendChild(elUnitPrice);

          i++;
          form1.number.value=i;
          //alert(i);

          document.getElementById("line").innerHTML = "whatever";
}

---

我已经移走了桌子，现在它不工作了。在没有表格的情况下，如何使用文本输入和文本区域实现同样的功能？

解决此问题的相对简单的方法：

function createFieldset(opts){
    // default settings:
    var s = {
        // finds the first form, could use "document.forms[0]" instead
        'appendTo' : document.querySelector('form'),
        // an array of elements you want to create:
        'create' : ['input', 'textarea'],
        // the element you want to wrap those elements with:
        'wrapper' : 'fieldset',
        // the className to apply to the wrapping-element:
        'wrapperClassName' : 'group',
        // the prefix of the 'legend' tag (if you want to use one):
        'legendPrefix' : 'Group '
    },
        // finding out where the count should start (by finding
        // the number of current wrapping elements), could use
        // 'document.getElementsByTagName(s.wrapper).length' or
        // 'document.getElementsByClassName(s.wrapperClassName).length':
        count = document.querySelectorAll(s.wrapper).length,
        // creating the wrapper element:
        container = document.createElement(s.wrapper),
        // finding out whether to use textContent or innerText:
        textProp = 'textContent' in document.body ? 'textContent' : 'innerText',
        // caching temporary variables for later:
        created,
        tmp;

    // iterating through any user-set properties to update the
    // default settings:
    for (var prop in opts) {
        if (opts.hasOwnProperty(prop)) {
            s[prop] = opts[prop];
        }
    }

    // if we have a prefix of length > 0 once leading/trailing white-space
    // is removed, then:
    if (s.legendPrefix.trim().length > 0) {
        // create a 'legend' element:
        var legend = document.createElement('legend');
        // set the text of that legend element to 's.legendPrefix n'
        legend[textProp] = s.legendPrefix + count;
        // append that legend element to the container element:
        container.appendChild(legend);
    }

    // iterating over the array of elements to be created:
    for (var i = 0, len = s.create.length; i < len; i++){
        // caching the string of the element at position i in the array:
        tmp = s.create[i];
        // creating the element at that position:
        created = document.createElement(tmp);
        // setting the id, and name, to element-type + n:
        created.id = tmp + (count);
        created.name = tmp + (count);
        // appending the element to the wrapping element:
        container.appendChild(created);
    }

    // setting the className of the wrapping element:
    container.className = s.wrapperClassName;
    // inserting the element to the appendTo node, before its lastElementChild:
    s.appendTo.insertBefore(container, s.appendTo.lastElementChild);
}

createFieldset({
    'wrapperClassName' : 'first'
});

var button = document.querySelector('#addMore');
button.addEventListener('click', function (event) {
    event.preventDefault();
    createFieldset();
}, false);

函数createFieldset（opts）{
//默认设置：
变量s={
//查找第一个表单，可以改为使用“document.forms[0]”
“appendTo”：document.querySelector（'form'），
//要创建的元素数组：
“创建”：[“输入”，“文本区域”]，
//要用其包装这些元素的元素：
“包装器”：“字段集”，
//要应用于包装元素的类名：
'wrapperClassName'：'group'，
//“图例”标记的前缀（如果要使用）：
“legendPrefix”：“组”
},
//找出计数应从何处开始（通过查找
//当前包装元素的数量），可以使用
//'document.getElementsByTagName（s.wrapper.length'或
//'document.getElementsByClassName（s.wrapperClassName）.length'：
count=document.querySelectorAll（s.wrapper）.length，
//创建包装器元素：
容器=document.createElement（s.wrapper），
//了解是使用textContent还是innerText：
textProp='textContent'在document.body中？'textContent'：'innerText'，
//缓存临时变量以供以后使用：
创建，
tmp；
//迭代任何用户集属性以更新
//默认设置：
用于（选项中的var prop）{
如果（选择hasOwnProperty（prop））{
s[prop]=选择[prop]；
}
}
//如果前导/尾随空格的前缀长度大于0
//删除，然后：
如果（s.legendPrefix.trim（）.length>0）{
//创建“图例”元素：
var legend=document.createElement（'legend'）；
//将该图例元素的文本设置为“s.legendPrefix n”
图例[textProp]=s.legendPrefix+计数；
//将该图例元素附加到容器元素：
容器。追加子项（图例）；
}
//迭代要创建的元素数组：
对于（变量i=0，len=s.create.length；i

参考资料：

---

我通常建议避免这样的动态html。它往往很难维持。通常最好在使用HTMLTable特定API调用的

addRow

方法中使用基于模板的绑定框架，如KnockoutJS或类似的框架（

row.insertCell（0）

）。您必须用其他DOM方法调用替换它们，这取决于您需要创建的HTML结构。你能和我们分享一下表单的新HTML是什么吗？当然可以-在这里检查你想要一个函数来创建和附加、

和

元素吗？总是两者都有？还是应该有一种附加一个或两个的方法？它们是否也应该有相关的

元素？在我粘贴的示例中，我希望能够单击一个按钮，添加一个新的字段集（第2行、第3行+）并在字段集中添加一个新的描述文本区域和新的价格文本输入，然后在每个输入的名称中添加一个唯一的数字