새 필드가 추가되면 동적으로 생성 된 양식 필드 값이 손실됩니다.

Question

javascript로 동적 필드 세트를 생성 중입니다. 필드를 추가하려면, 나는 다음과 같은 기능을 사용하여 코드를 많이 내가 좋겠 있기 때문에 // 검사에게 내가 innerHTML 대신 append 사용

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>"; 
} 

를 추가

(이 기능은 실제로 더 하나 개의 필드보다 추가) 마크 업이 너무 짧아서 추가해야합니다.

이제는 필드를 추가 (또는 제거) 할 때마다 다른 동적으로 생성 된 데이터의 모든 데이터가 손실된다는 문제점이 있습니다. 이 문제를 어떻게 해결할 수 있습니까? 값을 저장 한 다음 모든 필드에 값을 추가하는 것은 필자의 경우 매우 복잡 할 것입니다. 어떤 아이디어?

Answer 1

상위 요소의 innerHTML을 설정하면 전체 콘텐츠가 일련 화되고 다시 구문 분석되어 프로세스의 모든 값이 손실됩니다 (값은 값 특성으로 다시 직렬화되지 않음). ,

1. 이의 createElement 사용하여 외부 DIV합니다 (testContainer) 만들기의 innerHTML을 설정 한 후
2. 는 DOM을 사용하는 모든 요소를 ​​만들기 부모 요소에 사업부를 추가 : 나는 세 가지 해결 생각할 수 있습니다. 요소를 쉽게 만들 수 있도록 도우미 함수를 만드는 것은 간단합니다. 당신을 위해 모든 않습니다
3. 사용 jQuery를 : $(location).append('html goes here');