동적 HTML 생성_innerText, innerHTML, outerText, outerHTML

 

출처 : http://blog.naver.com/nicepicnic/50007138060

----------------------------------------------------------------------------------------------------

인터넷 익스플로러 4 이후부터는 웹 문서의 내용을 동적으로 변경시킬 수 있는 다양한 속성과 메쏘드를 제공하고 있는데 그 중 웹 페이지의 요소들에 들어있는 값을 확인하고, 그 요소의 값을 변경할 때 필요한 4가지 속성을 먼저 살펴본다면 다음과 같다.

• innerText
• outerText
• innerHTML
• outerHTML

위 속성을 사용한 예제들을 살펴보면서 각 속성의 차이점을 알아 보도록 하자.

우선 다음과 같은 코드가 있다고 하자.

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

이제 자바스크립트를 이용하여 위의 <p> 단락을 클릭하면 다음과 같이 innerText 속성을 변경하도록 해보자.

document.all.myP.innerText = "<b>e비즈니스</b> 및 <b>IT</b> 전문가를 위한 <font color="navy"><b>지식 미디어</b></font>"

결과가 궁금한 사람은 아래 "코리아인터넷닷컴에 오신 것을 환영합니다!" 단락을 클릭해 보기 바란다.

코리아인터넷닷컴에 오신 것을 환영합니다!

결과는

<b>e비즈니스</b> 및 <b>IT</b> 전문가를 위한 <font color=navy><b>지식 미디어</b></font>

이번엔 <p> 단락을 클릭하면 다음과 같이 innerHTML(대소문자 주의) 속성을 변경하도록 해보자.

document.all.myP.innerHTML = "<b>e비즈니스</b> 및 <b>IT</b> 전문가를 위한 <font color="navy"><b>지식 미디어</b></font>"

결과가 궁금한 사람은 아래 "코리아인터넷닷컴에 오신 것을 환영합니다!" 단락을 클릭해 보기 바란다.

코리아인터넷닷컴에 오신 것을 환영합니다!

결과는

e비즈니스 및 IT 전문가를 위한 지식 미디어

위의 결과를 보면 알겠지만 innerText 속성엔 HTML 태그를 삽입하여도 태그 자체를 텍스트로 인식해 버린다. 그에 반해 innerHTML 속성에 HTML 태그가 들어있는 텍스트를 설정하면 해당 태그를 해석할 수가 있다.

이번엔 outerText와 outerHTML에 대해 알아 보자. outerText와 OuterHTML은 태그 요소 안에 들어 있는 내용뿐만 아니라 태그 요소 자체도 포함하고 있는 속성이다.

이에 대한 명확한 이해를 돕기 위해 다음과 같은 테스트를 해보도록 하자.

• <p id="myP" onclick="alert(this.innerText)"><b>코리아인터넷닷컴</b>에 오신 것을 환영합니다!</p>
  결과확인 : (아래 단락을 마우스로 클릭하세요!)

  코리아인터넷닷컴에 오신 것을 환영합니다!
  
  결과는
  alert 로 코리아인터넷닷컴에 오신 것을 환영합니다!

•  <p id="myP" onclick="alert(this.innerHTML)"><b>코리아인터넷닷컴</b>에 오신 것을 환영합니다!</p>
  결과확인 : (아래 단락을 마우스로 클릭하세요!)

  코리아인터넷닷컴에 오신 것을 환영합니다!

          결과는
          alert 로 <b>코리아인터넷닷컴</b>에 오신 것을 환영합니다!

•   <p id="myP" onclick="alert(this.outerText)"><b>코리아인터넷닷컴</b>에 오신 것을 환영합니다!</p>
  결과확인 : (아래 단락을 마우스로 클릭하세요!)

코리아인터넷닷컴에 오신 것을 환영합니다!

결과는

alert 로 코리아인터넷닷컴에 오신 것을 환영합니다!

•  <p id="myP" onclick="alert(this.outerHTML)"><b>코리아인터넷닷컴</b>에 오신 것을 환영합니다!</p>
  결과확인 : (아래 단락을 마우스로 클릭하세요!)

  코리아인터넷닷컴에 오신 것을 환영합니다!
  
  결과는 <p id="myP" onclick="alert(this.outerHTML)"><b>코리아인터넷닷컴</b>에 오신 것을 환영합니다!</p>
  

위의 결과만을 놓고 보면 innerText와 outerText가 동일한 것처럼 보인다. 그렇다면 이 두 속성은 어떤 차이가 있는 것일까? 이 부분도 명확한 이해를 돕기 위해 예를 들어 설명하도록 하겠다.

• <H3 id="myH3" onclick="this.innerText='e비즈니스 및 IT 전문가를 위한 지식 미디어'">코리아인터넷닷컴에 오신 것을 환영합니다!</H3>
  결과확인 : (아래 단락을 마우스로 클릭하세요!)

  코리아인터넷닷컴에 오신 것을 환영합니다!
  
  결과는
  

  e비즈니스 및 IT 전문가를 위한 지식 미디어

•  <H3 id="myH3" onclick="this.outerText='e비즈니스 및 IT 전문가를 위한 지식 미디어'">코리아인터넷닷컴에 오신 것을 환영합니다!</H3>
  결과확인 : (아래 단락을 마우스로 클릭하세요!)

코리아인터넷닷컴에 오신 것을 환영합니다!

결과는
e비즈니스 및 IT 전문가를 위한 지식 미디어

위 두 결과에 대한 차이점은 무엇인가? innerText는 해당 텍스트를 포함하고 있는 태그 요소는 변경되지 않은 채 순수한 텍스트만 변경되었다. 하지만 outerText는 해당 텍스트를 포함하고 있는 태그 요소(여기서는 H3 요소)까지 모두 새로운 텍스트로 변경되므로 H3 속성은 없어지게 된다.

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

 

innerText

innerText 속성을 지원하는 객체의 시작 태그와 종료 태그 사이에 있는 텍스트를 설정하거나 가지고 올 수가 있다.

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

innerText의 간단한 예제

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

코리아인터넷닷컴에 오신 것을 환영합니다!

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

<p onmouseover="this.innerText='e비즈니스 및 IT 전문가를 위한 지식 미디어!'" onmouseout="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='javascript:void(0);' onclick='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예제 보기" onclick="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 onclick="copyHTML()"> <li><b>코리아인터넷닷컴</b> <li><font color="#d03030"><strong>e비즈니스 및 IT 전문가를 위한 지식 미디어</strong></font> <li><strike>korea.internet.com</strike> </ul> <DIV ID = "objDiv"> </DIV>

e비즈니스 및 IT 전문가를 위한 지식 미디어 클릭 objTag.outHTML 값은

  : <strong>e비즈니스 및 IT 전문가를 위한 지식 미디어</strong>

● e비즈니스 및 IT 전문가를 위한 지식 미디어클릭 objTag.outHTML 값은

  : <li><font color="#d03030"><strong>e비즈니스 및 IT 전문가를 위한 지식 미디어

    </strong></font>

outer 는 태그를 포함해서 값을 취하고, inner는 태그를 포함하지 않고 시작태크와 종료태그 안의 값을 제어한다.

 

출저 : 코리아인터넷닷컴