2009. 7. 4. 14:18
innerHTML, innerText, outerHTML, outerText 사용하기
2009. 7. 4. 14:18 in 3. Implementation/VB / Java Script

innterHTML 은 새로운 태그를 그 안에 넣을 수 있다.
innerText 는 단순히 텍스트만 넣을 수 있다.
outerHTML 은 아예 태그까지 변경한다.
outerText 는 내용을 바꾸되 새로운 태그는 넣을 수 없고 다만 텍스트만 넣을 수 있다.
실행 결과 :
참고 : 삼성 SDS 멀티캠퍼스 : JavaScript 쉽고 빠르게 과정 중에서
innerText 는 단순히 텍스트만 넣을 수 있다.
outerHTML 은 아예 태그까지 변경한다.
outerText 는 내용을 바꾸되 새로운 태그는 넣을 수 없고 다만 텍스트만 넣을 수 있다.
<html> <head> <style type=text/css> h2 {color:blue; text-align:center} </style> </head> <body> <h2 onClick="this.innerHTML= '<div>이문장이<i>innerHTML</i>입니다.</div>'"> 클릭하시면 내용을변경하실수있습니다. </h1> <h2 onClick="this.innerText= '<div>이문장이innerText입니다.</div>'"> 클릭하시면내용을변경하실수있습니다. </h2> <h2 onClick= "this.outerHTML='<div>이문장이<i>outerHTML</i>입니다.</div>'"> 클릭하시면내용을변경하실수있습니다. </h2> <h2 onClick= "this.outerText='<div>이문장이outerText 입니다.</div>'"> 클릭하시면내용을변경하실수있습니다. </h1> </body> </html> |
실행 결과 :
참고 : 삼성 SDS 멀티캠퍼스 : JavaScript 쉽고 빠르게 과정 중에서