innerHTML과 outerHTML

다음과 같은 HTML 구문이 주어졌다고 가정을 해봅시다.

<div id="d">
   <p>Content</p>
   <p>Further Elaborated</p>
</div>

위의 HTML구문에서 "d"를 기준으로 innerHTML과 outerHTML을 구하면 innerHTML은 <div id="d"></div>의 안에 있는 HTML 코드만 리턴(<p>Content</p><p>Further Elaborated</p>)하고 outerHTML은 <div id="d"></div>를 포함한 코드를 리턴(<div id="d"><p>Content</p><p>Further Elaborated</p></div>)합니다.

d = document.getElementById("d");
alert(d.innerHTML);
alert(d.outerHTML);

아래의 그림은 innerHTML을 Firefox에서 출력한 화면 입니다. outerHTML의 경우에는 IE에서만 지원하므로 IE이외의 브라우져에서는 따로 처리를 해야 합니다.

outerHTML을 가지고 오는 코드는 다음과 같습니다.

1. outerHTML을 가지고 올 element의 ownerDocument에 "body"를 생성합니다.
   var d = elem.ownerDocument.createElement("body");
2. 생성된 body에 outerHTML을 가지고 올 element를 더합니다.
   d.appendChild(e);
3. body의 안에 설정되어 있는 HTML코드를 리턴합니다.
   return d.innerHTML;
   

outerHTML을 설정하는 코드도 동일합니다. 차이는 d.innerHTML에 추가할 outerHTML코드를 대입하면 됩니다.

d.innerHTML = outer;