Динамически сгенерированное поле формы теряет значение при добавлении нового поля

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

Установка внутреннегоHTML родительского элемента приводит к сериализации всего содержимого и последующему повторному анализу, теряя все значения в процессе (значения не преобразуются в последовательные значения в атрибуты значения). Я могу думать о трех обходные:

1. Создать свой внешний DIV (testContainer) с помощью createElement, установите его innerHTML, а затем добавить DIV в родительский элемент
2. Создать все элементы, используя DOM. Тривиально создать кучу вспомогательных функций, чтобы упростить создание элементов.
3. Использование JQuery, который делает все это для вас: $(location).append('html goes here');