이상한 innerHTML
이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);
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다른 사람의 웹사이트 편집: contenteditable 및 designMode그래도 우리가 그렇게 할 수 있다고 생각하는 것은 멋진 일입니다. 제가 강조하고 싶었던 일종의 관련 API가 실제로 몇 개 있기 때문에 오늘 그것을 가져왔습니다. contenteditable는 "true" 값이 할당...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.