글
<html>
<head><title>예제 9-5</title></head>
<body bgcolor="yellow"
onload="srcTxt.value=objDiv.outerHTML">
<h3>innerHTML, innerText, outerHTML, outerText 비교하는 예</h3>
<hr noshade>
<div id="objDiv" style="background-color:cyan">
<p>아래 링크와 버튼에서 액세스되는 <b>div</b> 객체입니다.
</div>
<p>
위의 div 태그는 다음과 같습니다 <br>
<textarea id="srcTxt" rows=5 cols=50>
</textarea>
<hr noshade>
다음 버튼을 클릭하면 위의 div 객체 내의 속성을 보여줍니다.<p>
<a href="javascript:alert(objDiv.innerHTML)">div의 innerHTML</a><br>
<a href="javascript:alert(objDiv.outerHTML)">div의 outerHTML</a><br>
<a href="javascript:alert(objDiv.innerText)">div의 innerText</a><br>
<a href="javascript:alert(objDiv.outerText)">div의 outerText</a><p>
<hr noshade>
아래 창에 입력하여 변경하면 위의 div 객체의
내용이 변하는 것을 확인할 수 있습니다.<p>
변경하고자 하는 innerText를 입력하세요.<br>
<input type="text" id="inText" value="테스트 innerText">
<button onClick="objDiv.innerText=inText.value;">변경</button><br>
변경하고자 하는 outerText를 입력하세요.<br>
<input type="text" id="outText" value="테스트 outerText">
<button onClick="objDiv.outerText=outText.value;">변경</button>
<!-- outerText 변경시 objDiv까지 주소값이 변경됨 -->
</body>
</html>
'JS > etc' 카테고리의 다른 글
| Ajax - innerHTML (0) | 2009.01.05 |
|---|---|
| innerHTML의 한계와 해결 (0) | 2009.01.05 |
| jQuery로 Ajax 개발을 단순화 하기 (0) | 2009.01.05 |
| FireFox, IE에서 모두 iframe 사이즈 자동 조절 하는 방법 (0) | 2009.01.05 |
| List of AJAX Start Page (0) | 2009.01.05 |
| ajax를 이용한 파일 탐색기 (0) | 2009.01.05 |
| PHP와 AJAX를 연동해보자 (0) | 2009.01.05 |
| xml & javascript로 트리 메뉴 만들기 (0) | 2008.10.24 |
RECENT COMMENT