Question

我正在使用javascript生成动态字段集。对于添加字段，我使用以下函数（此函数实际上添加了多个字段）

//添加测试

function addTest() {
    var location = document.getElementById('addTestLocation');
    var num = document.getElementById('addTestCount');
    var newnum = (document.getElementById('addTestCount').value -1)+ 2;
    num.value = newnum;
    location.innerHTML += "<div id='testContainer_"+newnum+"'><label for='test_"+newnum+"'>Test name: </label><input type='text' name='test_"+newnum+"' id='test_"+newnum+"'/>&nbsp;&nbsp;&nbsp;<a href='javascript: removeTest("+newnum+")'>- Remove test</a><br/><br/><span id='addObjectLocation'></span><br/><select id='select_"+newnum+"'><option>True or False</option><option>Single choice</option><option>Multiple choice</option><option>Short definition</option><option>Fill in the blanks</option></select><input type='hidden' id='addObjectCount' value='0'/>&nbsp;&nbsp;&nbsp;<a href='javascript:addObject();'>+ add question</a><br/><br/><hr/><br/></div>";
}

我使用innerHTML代替append，因为我需要添加很多代码，这样标记就会短得多。

现在，我的问题是每当我添加（或删除）字段时，其他动态生成的数据中的所有数据都将丢失。我怎样才能解决这个问题？在我的情况下，保存值然后将其添加到每个字段将再次非常复杂。有什么想法吗？

Answer 1

设置父元素的innerHTML会导致整个内容被序列化然后重新解析，从而丢失进程中的所有值（值不会被序列化回值属性）。我可以想到三个解决方法：

使用createElement创建外部div（testContainer），设置其innerHTML然后将div附加到父元素
使用DOM创建所有元素。创建一堆辅助函数以简化元素创建是微不足道的。
使用jQuery为您完成所有这些工作：$(location).append('html goes here');

添加新字段时，动态生成的表单字段会丢失值

1 个答案: