이상한 innerHTML

오늘 현재 프로젝트에서 이러한 사례가 언급되었다. 나는 innerHTML로div의 내용을 임시로 저장한 다음에 어떤 조건이 충족될 때 이 innerHTML을 이div에 되돌려 주려고 한다.
 
이div에 edit 탭이 존재하면 저장된 내용을 다시 되돌릴 때 Firefox로 훑어볼 때 edit 안의 내용이 텅 비어 있음을 발견합니다!!!
 
같은 응용 방식인데 다른div의edit의 내용이 완전하게 회복될 수 있다는 게 의아한데???
 
나는 IE로 열어 보았는데 앞뒤 두 개의div가 모두 정상적으로 작동할 수 있고 모든 내용이 완벽하게 반환될 수 있었다.
 
서둘러 자료를 찾아보고 코드를 보니 두 개의div 중의edit의 창설 방식이 다르다는 것을 발견했다.이전 div는 createElement을 통해 edit를 만들고 다양한 속성을 추가하는 것으로 코드는 다음과 같이 표시됩니다.
4

var edit = document.createElement("input");   
edit.id = name;   
edit.type = "text";   
edit.value = val;   
div.appendChild(edit);  

다음 div는 HTML을 직접 추가하여 다음과 같이 표시됩니다.

var html = "<input type='text' id='" + name + "' value='" + val + "' />";   
div.innerHTML = html;   

천천히 문제의 근원이 확 트인다!M$IE와 달리 Mozilla Firefox에 있는 inner HTML은 요소의 모든 노드의 tagName과attrubutes를 옮겨다니며 inner HTML을 얻을 수 있습니다. 따라서 이전 예에서 inner HTML은 변경된value 값을 얻지 못합니다.이전 코드를 다음과 같이 수정하면 innerHTML은 IE와 FF에서 막힘없이 통용됩니다.

var edit = document.createElement("input");   
edit.id = name;   
edit.setAttribute("type", "text");   
edit.setAttribute("value", name);   
div.appendChild(edit);