티스토리 뷰

IT 이야기/프로그래밍

[HTML] innerHTML을 이용한 간단한 예제 소스

하늘과 나b 2010. 7. 29. 18:25

innerHTML을 이용해서 간단한 예제를 만들어 보겠습니다.

그림은 아래와 같습니다. 버튼을 클릭하면 버튼 왼쪽에 있는 문자열이 바뀌는 것이지요.

 

(그림1) 버튼을 누르기 전의 모습

 

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

 

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

    <script type="text/javascript">       
function changeText()
        {
            document.getElementById ( "id_test" ).innerHTML = "짜잔~ 바뀌었습니다." ;
        }    
     바뀌기 전입니다.

innerHTML은 태그 안의 값을 바꾸는 기능을 수행합니다.

즉 위의 소스에서 녹색 부분인 "바뀌기 전입니다." 부분이 변경되는 것이지요.


간단하죠?


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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>innerHTML 예제</title>
    <script type="text/javascript">
        function changeAnchor()
        {
          m_id_test = document.getElementById ( "id_test" ) ;    
          m_id_test.innerHTML = "짜잔~ 바뀌었습니다." ;
          m_id_test.href      = "http://promisej7.tistory.com/" ;
          m_id_test.target    = "_blank" ;
        }
    </script>
  </head>

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


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


오늘은 이만 끝~~







저작자표시

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

[PHP] 방문자의 숫자를 세는 카운터(counter) 만들기  (3) 2010.07.29
[HTML] input box 한글/영문 기본값 설정  (0) 2010.07.29
[JAVA] StringBuffer 객체의 초기화  (0) 2010.07.29
[JAVA] getTextContent() JDK 1.4에서 사용하기  (2) 2010.07.29
[PHP] 현재 디렉토리 경로를 출력하는 소스  (0) 2010.07.29
[프로그래밍 테크닉] C언어 소스 최적화 테크닉  (0) 2010.07.29
[프로그래밍 문제] 동전 뒤집기 문제  (0) 2010.07.29
[프로그래밍 테크닉] 기본적인 Data Toggling 방법  (0) 2010.07.29
[프로그래밍 문제] 마이크로소프트 입사 시험에 나왔던 문제  (9) 2010.07.29
[C언어] fopen(), fprintf()함수를 이용한 파일 입출력  (0) 2010.07.29
공유하기 링크
댓글