계속되어 오던 HTML페이지의 refresh문제를 innerHTML을 사용하여 해결하였다.
이것은 iframe과 함께 사용하면 refresh(어떤 방법으로 하던)를 했을 경우 refresh된 frame으로
포커스가 이동되는 것을 막을 수 있다.
또한 아울러 플레시 게시판, 템플릿 방식의 웹페이지등에 응용하면 좋을 것 같다.
아래의 소스로 간단히 테스트 해 볼 수 있으며, 그룹웨어에도 사용하였다.
<HTML><HEAD>
<TITLE> innertext와 innerhtml</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function texttest(){
//m이라는 marquee개체의 innerText속성에"
document.all.m.innerText="<font color=\"red\">월드컵코리아</font>";
}
function htmltest(){
document.all.m.innerHTML="<font color=\"red\">월드컵코리아</font>";
}
function control(v){
document.all.m.direction=v;
}
//-->
</SCRIPT></HEAD>
<BODY>
<marquee width="450" height="400" style="background-Color:yellow;colord:red" direction="down" Scrolldelay=30 id="m"> 마퀴태구.. </marquee><p>
<span style="cursor:hand" Onclick="texttest()">[innerText]</span>
<span style="cursor:hand" Onclick="htmltest()">[innerHTML]</span><p>
<span style="cursor:hand; border-style:solid; border-width:1px; background-Color:#cccccc; padding:10px" Onclick="control(this.innerText)">up</span>
<span style="cursor:hand; border-style:solid; border-width:1px; background-Color:#cccccc; padding:5px" Onclick="control(this.innerText)">down</span>
<span style="cursor:hand; border-style:solid; border-width:1px; background-Color:#cccccc; padding:5px" Onclick="control(this.innerText)">left</span>
<span style="cursor:hand; border-style:solid; border-width:1px; background-Color:#cccccc; padding:5px" Onclick="control(this.innerText)">right</span>
</BODY>
</HTML>
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> <img src='/images/photoshop/020122p_04.jpg' border=0></a>"; 것이 가능합니다!') }"; |
위 소스 코드를 보면 알겠지만 이미지 삽입과 스크립트 삽입은 웹 문서를 다 읽은 후 동적으로 생성하고 있다. 여기서 주의해할 점은 스크립트를 동적으로 삽입할 경우 DEFER 속성을 반드시 사용해야 한다는 것이다. 이것은 단순한 하나의 예에 불과하다. 이 innerHTML 속성을 잘 사용하면 동적으로 웹 문서의 내용을 변경하여 인터랙티브한 기능들을 많이 구현할 수 있다.
outerText
outerText는 outerText 속성을 지원하는 객체의 텍스트를 설정하거나 가지고 올 수가 있다. HTML, TABLE, TBODY, TFOOT, THEAD, TR 객체 요소에서의 outerText 속성은 값을 가지고 올 수만 있고 설정할 수는 없다. 테이블과 관련한 요소의 값을 변경하려면 테이블 오브젝트 모델을 별도로 이용해야 한다.
outerText는 얼핏 보면 innerText와 비슷하다. 하지만 그 차이에 대해선 이미 지난 시간에 살펴본 적이 있다. outerText가 innerText와 다른 부분을 잘 보여주는 예 한 가지를 더 살펴보자.
다음과 같은 소스 코드가 있다고 가정해 보자.
|
<div id=objDiv> |
만일 여기서 objPara.outerText="e비즈니스 및 IT 전문가를 위한 지식 미디어!"라고 하면 위의 소스 코드는 내부적으로 다음과 같이 변경되어 있을 것이다.
|
<div id=objDiv> |
하지만 objPara.innerText="e비즈니스 및 IT 전문가를 위한 지식 미디어!"라고 한다면 위의 소스 코드는 내부적으로 다음과 같이 변경되어 있을 것이다.
|
<div id=objDiv> |
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> <ul onclick="copyHTML()"> <DIV ID = "objDiv"> |
지금까지 innerText, innerHTML, outerText, outerHTML에 대한 세부적인 특성에 대해 살펴보았다. 다음 시간엔 동적으로 내용을 추가하는 것의 핵심인 insertAdjacentHTML에 대해 살펴보도록 하겠다
[출처] 웹디황용
"쇼핑몰·홈페이지·오픈마켓
블로그·페이스북·이메일 등의 각종 마케팅 글쓰기, 각종 광고, 영업, 판매, 제안서, 전단지 반응율 3배×10배 이상 높이는 마법의 8단계 공식" |
|
| ☞자세히보기 |
|
|
|
