3

我正在使用 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因为我必须附加很多代码，这样标记就短得多了。

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

4

1 回答 1

4

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

  1. 使用 createElement 创建外部 div（testContainer），设置其 innerHTML，然后将 div 附加到父元素中
  2. 使用 DOM 创建所有元素。创建一堆帮助函数以使创建元素更容易是微不足道的。
  3. 使用 jQuery 为您完成所有这些工作：$(location).append('html goes here');
于 2010-05-13T12:53:56.580 回答