innerHTML, outerHTML, insertAdjacentHTML

 

지난 시간에 innerText, innerHTML, outerText, outerHTML에 대한 간략한 특징들에 대해 살펴보았다. 이번 시간엔 각 속성의 세부적인 특성에 대해 살펴보기로 하자.

 

 

innerText

innerText는 innerText 속성을 지원하는 객체의 시작 태그와 종료 태그 사이에 있는 텍스트를 설정하거나 가지고 올 수가 있다. HTML, TABLE, TBODY, TFOOT, THEAD, TR 객체 요소에서의 innerText 속성은 값을 가지고 올 수만 있고 설정할 수는 없다. 테이블과 관련한 요소의 값을 변경하려면 테이블 오브젝트 모델을 별도로 이용해야 한다.

innerText의 간단한 예는 다음과 같다. 아래 단락에 마우스를 올려 놓았다 떼면 텍스트가 동적으로 변하는 것을 확인할 수 있을 것이다.

 

위 결과에 대한 소스 코드는 다음과 같다.

<p on-mouseover="this.innerText='e비즈니스 및 IT 전문가를 위한 지식 미디어!'" on-mouseout="this.innerText='코리아인터넷닷컴에 오신 것을 환영합니다!'">코리아인터넷닷컴에 오신 것을 환영합니다!</p>

 

 

innerHTML

innerHTML은 innerHTML 속성을 지원하는 객체의 시작 태그와 종료 태그 사이에 있는 HTML을 설정하거나 가지고 올 수가 있다. COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR 객체 요소에서의 innerHTML 속성은 값을 가지고 올 수만 있고 설정할 수는 없다. innerHTML 속성은 해당 웹 문서를 완전히 읽어들인 후(onLoad 이벤트 발생 후)에야 사용할 수 있다. innerText는 HTML 태그 조자 텍스트로 인식하지만 innerHTML은 HTML 태그를 해석할 수가 있다.

innerHTML의 간단한 예는 다음과 같다. 아래 버튼을 클릭하면 이미지가 하나 새로 생겨날 것이다. 해당 이미지를 클릭하면 동적으로 삽입한 스크립트가 실행되는 것을 확인할 수 있을 것이다.

 

← 클릭시에 밑에 그림이 나온다.

 

 

위 결과에 대한 소스 코드는 다음과 같다.

<SCRIPT>     function insertHTML(){         var strHTML="<a href='javascripｔ:void(0);' on-click='scriptTest()'><img src='/images/photoshop/020122p_04.jpg' border=0></a>";         var strScript="<SCRIPT DEFER>";         strScript = strScript + "function scriptTest(){ alert('동적으로 스크립트를 삽입하는 것이 가능합니다!') }";         strScript = strScript + "</SCRIPT" + ">";         objImg.innerHTML = strHTML + strScript;     }     </SCRIPT> <input type="button" value="innerHTML예제 보기" on-click="insertHTML()"> <div id=objImg></div>

 

위 소스 코드를 보면 알겠지만 이미지 삽입과 스크립트 삽입은 웹 문서를 다 읽은 후 동적으로 생성하고 있다. 여기서 주의해할 점은 스크립트를 동적으로 삽입할 경우 DEFER 속성을 반드시 사용해야 한다는 것이다. 이것은 단순한 하나의 예에 불과하다. 이 innerHTML 속성을 잘 사용하면 동적으로 웹 문서의 내용을 변경하여 인터랙티브한 기능들을 많이 구현할 수 있다.

 

 

outerText

outerText는 outerText 속성을 지원하는 객체의 텍스트를 설정하거나 가지고 올 수가 있다. HTML, TABLE, TBODY, TFOOT, THEAD, TR 객체 요소에서의 outerText 속성은 값을 가지고 올 수만 있고 설정할 수는 없다. 테이블과 관련한 요소의 값을 변경하려면 테이블 오브젝트 모델을 별도로 이용해야 한다.

outerText는 얼핏 보면 innerText와 비슷하다. 하지만 그 차이에 대해선 이미 지난 시간에 살펴본 적이 있다. outerText가 innerText와 다른 부분을 잘 보여주는 예 한 가지를 더 살펴보자.

 

다음과 같은 소스 코드가 있다고 가정해 보자.

<div id=objDiv> <p id=objPara>코리아인터넷닷컴에 오신 것을 환영합니다!</p> </div>

 

만일 여기서 objPara.outerText="e비즈니스 및 IT 전문가를 위한 지식 미디어!"라고 하면 위의 소스 코드는 내부적으로 다음과 같이 변경되어 있을 것이다.

<div id=objDiv> e비즈니스 및 IT 전문가를 위한 지식 미디어! </div>

 

하지만 objPara.innerText="e비즈니스 및 IT 전문가를 위한 지식 미디어!"라고 한다면 위의 소스 코드는 내부적으로 다음과 같이 변경되어 있을 것이다.

<div id=objDiv> <p id=objPara>e비즈니스 및 IT 전문가를 위한 지식 미디어!</p> </div>

innerText보다 사용할 기회는 많지 않지만 그 차이점은 분명히 기억하고 있기를 바란다.

 

 

 

outerHTML

outerHTML은 outerHTML 속성을 지원하는 객체의 시작 태그와 종료 태그 사이에 있는 HTML을 설정하거나 가지고 올 수가 있다. COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR 객체 요소에서의 outerHTML 속성은 값을 가지고 올 수만 있고 설정할 수는 없다. outerHTML 속성은 해당 웹 문서를 완전히 읽어들인 후(onLoad 이벤트 발생 후)에야 사용할 수 있다.

outerHTML은 얼핏 보면 innerHTML과 비슷하다. 하지만 그 차이에 대해선 이미 지난 시간에 살펴본 적이 있다.

outerHTML을 활용하는 예를 하나 살펴보도록 하자. 아래 리스트 아이템을 마우스로 클릭하면 해당 객체가 그대로 하단에 복사되는 것을 확인할 수 있을 것이다. 이 때 아이템의 텍스트를 클릭하는 것과 <li> 부분 (텍스트 앞의 점으로 표시된 부분)을 클릭하는 것이 어떻게 다른지도 비교해 보기 바란다.

• 코리아인터넷닷컴
• e비즈니스 및 IT 전문가를 위한 지식 미디어
• korea.internet.com

여기서 사용한 소스 코드는 다음과 같다.

<SCRIPT> function copyHTML(){    var objTag = event.srcElement;       alert("선택한 객체 : " + objTag.outerHTML);       objDiv.innerHTML += objTag.outerHTML + "<BR>"; }        </SCRIPT> <ul on-click="copyHTML()"> <li><b>코리아인터넷닷컴</b> <li><font color="#d03030"><strong>e비즈니스 및 IT 전문가를 위한 지식 미디어</strong></font> <li><strike>korea.internet.com</strike> </ul> <DIV ID = "objDiv"> </DIV>

 

지금까지 innerText, innerHTML, outerText, outerHTML에 대한 세부적인 특성에 대해 살펴보았다. 다음 시간엔 동적으로 내용을 추가하는 것의 핵심인 insertAdjacentHTML에 대해 살펴보도록 하겠다.

 

출처: http://blog.naver.com/kwonhjae