티스토리 뷰

IT 이야기/프로그래밍

[Javscript] innerHTML 예제

하늘과 나b 2010. 8. 9. 15:34
J a v a s c r i p t  이 야 기

[Javscript] innerHTML 예제

오늘은 innerHTML을 이용해서 간단한 예제를 만들어 보겠습니다.
 
그림은 아래와 같습니다. 버튼을 클릭하면 버튼 왼쪽에 있는 문자열이 바뀌는 것이지요.
 
(그림1) 버튼을 누르기 전의 모습


(그림2) 버튼을 누른 후의 모습



그러면 소스를 보겠습니다.

 
<html>
  <head>
    <title>innerHTML 예제
    <script type="text/javascript">
        function changeText()
        {
            document.getElementById ( "id_test" ).innerHTML = "짜잔~ 바뀌었습니다." ;
        }
    </script>
  </head>

  <body>
     <a id="id_test" href="www.naver.com" >바뀌기 전입니다.
    <input type="button" value="클릭하면 바뀝니다." onclick="changeText();"/>
  </body>
</html>


innerHTML은 태그 안의 값을 바꾸는 기능을 수행합니다.
 
즉 위의 소스에서 녹색 부분인 "바뀌기 전입니다." 부분이 변경되는 것이지요.

간단하죠?

심심하니까 앞서 실행한 예제에서 Anchor 태그의 주소의 타겟을 바꾸는 소스를 추가해 보도록 하겠습니다.



<html>
  <head>
    <title>innerHTML 예제
    <script type="text/javascript">
        function changeAnchor()
        {
          m_id_test = document.getElementById ( "id_test" ) ;
            
          m_id_test.innerHTML = "짜잔~ 바뀌었습니다." ;
          m_id_test.href      = "http://www.tistory.com/" ;
          m_id_test.target    = "_blank" ;
        }
    </script>
  </head>
  <body>
    <a id="id_test" href="www.naver.com" >바뀌기 전입니다.
 <input type="button" value="클릭하면 바뀝니다." onclick="changeAnchor();"/>
  </body>
</html>

링크를 클릭하면 다른 주소로 가는 것이 보이시죠?


오늘은 이만 끝~~

저작자표시

'IT 이야기 > 프로그래밍' 카테고리의 다른 글

HTML 글씨에 효과주기  (0) 2010.08.15
AJAX 예제. 파일 읽어서 화면에 출력하기  (0) 2010.08.15
AJAX 예제. XML 파일 읽어서 출력하기  (4) 2010.08.15
[Javascript] 마우스 금지 소스  (0) 2010.08.15
[HTML] HTML5 문서타입(doctype)  (0) 2010.08.09
[Javascript] 즐겨찾기 추가 스크립트 소스  (0) 2010.08.09
[Javascript] GetElementById 예제  (0) 2010.08.09
[JSP] 페이지 이동에 관한 글  (0) 2010.08.09
[PHP]에서 지원하는 MySQL API 함수  (0) 2010.08.09
[MySQL]Load Data infile  (0) 2010.08.09
공유하기 링크
댓글