innerHTML form 오류(IE 계열만) - 해결책
innerHTML form 오류(IE 계열만)
동적으로 페이지를 구성하기 위하여 innerHTML을 사용하게 되는데,
FF 계열은 문제가 없으나 IE 계열에서 문제가
발생한다.
만일 innerHTML로 대입하려는 문자열에 form 태그가 존재한다면 innerHTML은 동작하지 않는다.
var
oDiv = document.getElementById("testdiv");
oDiv.innerHTML =
"<form><input
type="text"></form>"; // 오류 발생
oDiv.innerHTML = "<input
type="text">"; // 정상
회피할 수 있는 방법은
없다.
innerHTML로 oDiv 객체 안에 다른 객체를 넣어서 그 객체의 innerHTML을 하더라도 오류가 발생한다.
브라우저별 버그 및 차이점
XHTML : form 하부의 노드에 대해서 innerHTML 로 새로운 노드를 생성할 때, form 을 생성할 경우 '알 수 없는 런타임 오류' 발생
1. 발생현상
form 하부의 노드 (직접적 하부 및 2Depth 이상의 하부를 모두 포함) 에 대해서 innerHTML 로 새로운 노드를 생성할 때, innerHTML 로 대입할 문자열 안에 form 태그가 어느 Depth 에 존재하든지간에 innerHTML 에 대입하는 순간 '알 수 없는 런타임 오류' 가 발생한다.
* 예
<form>
<div id="xx">
</div>
</form>
...
var node = document.getElementById("xx");
node.innerHTML = '<div id="xx2"><form><input type="text" /></form></div>'; <- 오류 발생
2. 브라우저 별 특성
o. 발생하는 브라우저
- Microsoft Internet Explorer 7
o. 발생하지 않는 브라우저
- Mozilla Firefox 2.0
- Opera 9.x
3. 해결방법
- 근본적인 해결방법은 없음
- 가급적 다음 사항을 지킨다.
1) form 하부 노드에 대해서는 form 을 생성하는 것을 최대한 피한다.
2) form 노드를 컴포넌트화 시킬 노드의 경계점으로 두지 않도록 한다.
==>해결책 ㅋㅋㅋ
http://domscripting.com/blog/display/99
Fixing innerHTML
I presented my Brighton Ajax workshop yesterday. It all went rather smoothly. The workshop was in the same swanky building as the Clearleft office so I felt like I was playing on home turf. The homely feel was emphasised with the choice of snacks: Jessica was kind enough to bake up a whole batch of cookies for the workshop attendees. The cookies were a big hit.
During the workshop, I discussed the data formats available for Ajax
responses. There’s XML and JSON, both of which can be parsed and
then added to the document using DOM
methods like createElement and appendChild. Another
option is to simply send back HTML from the server and dump it into
the document using innerHTML. If I ever find myself needing to
update just one part of the page, this is the solution I use.
Suppose the part of the page I want to update is a div with an
ID of “container”. I can just add the HTML that has been sent in the
responseText property of XMLHttpRequest:
var container = document.getElementById("container");
container.innerHTML = xhr.responseText;
But innerHTML can cause some problems, particularly in Internet
Explorer. If you use innerHTML to add or update form
elements, all sorts of screwiness can occur. Sometimes the data from the newly
added elements won’t be included when the form is submitted to the server.
Toby Cole?a Brighton-based developer working at Semantico?was at the workshop. He proposed an ingenious solution.
First of all, use the DOM to create a block level element?such as a
div?using createElement. Then update the
innerHTML property of this newly-created element. Finally, insert
the updated element into the document using a DOM method like
appendChild or insertBefore:
var newdiv = document.createElement("div");
newdiv.innerHTML = xhr.responseText;
var container = document.getElementById("container");
container.appendChild(newdiv);
Ta-da! The best of both worlds: the brevity and speed of
innerHTML but without the problems in IE.
See, this is one of the reasons why I like the intimacy of workshops. It’s a great environment to exchange ideas. I think I’ve learned something new from the attendees at every workshop I’ve presented but this one was particularly fruitful.
Posted by Jeremy on Saturday, March 3rd, 2007 at 7:53pm