P 엘리먼트에는 Block Element를 추가할 수 없다.

발생일: 2011.04.22

문제:
잘 작동하던 스크립트가 작은 수정 이후에 제대로 작동을 안한다.
IE에서만, '알 수 없는 오류'란다.

템플릿으로 태그를 만들어 P 엘리먼트에 innerHTML로 설정하는 부분이었는데,
확인해보니 innerHTML로 추가하려는 태그 문자열 부분에 <p> 태그가 포함되어 있던 게 원인이었다.

  pElement.innerHTML = "<p>insert paragraph tag</p>";


유독 IE에서만 <p> 태그에 innerHTML로 <p> 태그를 넣으면 IE에서 '알 수 없는 오류'가 발생한다.

왜 그런걸까?

해결책:
W3C 스펙에 의하면 패러그래프(P) 엘리먼트에는 Block Element를 추가할 수 없다.
  http://www.w3.org/TR/html401/struct/text.html#h-9.3.1

IE에서는 p 태그에 p를 포함한 모든 블럭 엘리먼트를 추가할 경우, 알 수 없는 오류가 발생한다.
IE 이외의 브라우저에서는 문제 없이 실행된다.
또한 span 이나 a, strong 등과 같은 다른 인라인 엘리먼트에는 문제 없이 추가된다.

몇 가지 테스트를 해봤다.

아래 동작은 IE에서 모두 '알 수 없는 오류(Unknown Runtime Error)'를 발생한다.

  p.innerHTML = '<p></p>';
  p.innerHTML = '<div></div>';
  p.innerHTML = '<div style="display:inline;"></div>";

p 엘리먼트에 블럭 엘리먼트를 넣으면 오류가 발생한다.
블럭 엘리먼트의 display를 인라인으로 설정해도 마찬가지로 오류가 발생한다.


반면 아래와 같이 p 태그 안에 인라인 엘리먼트를 추가하거나,
다른 인라인 엘리먼트 안에 블럭 엘리먼트를 추가할 경우에는 문제 없이 실행된다.

  p.innerHTML = "<span></span>";
  span.innerHTML = "<p></p>";
  span.innerHTML = "<div></div>";
  strong.innerHTML = "<table></table>";


p 엘리먼트에 블럭 엘리먼트를 추가하지 않도록 주의하자.