2009. 7. 4. 14:18

innerHTML, innerText, outerHTML, outerText 사용하기

innterHTML 은 새로운 태그를 그 안에 넣을 수 있다.

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 쉽고 빠르게 과정 중에서