티스토리 뷰

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>

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


오늘은 이만 끝~~

댓글
  • 프로필사진 궁금해요~ 위에 예제처럼하면 한번밖에 바꿀수가없는대
    두번 세번 바꾸려면 어떤형식을 써야돼는건가요?
    2013.07.12 14:21
  • 프로필사진 하늘과 나 changeAnchor() 함수 안에 하나의 변수를 선언한 후 그 값이 1,2,3 일 때 if문으로 실행할 수 있도록 하셔야 할 것 같습니다.

    예를 들면 count라는 변수를 선언한 후
    count % 3의 값이 0일 때의 if문 분기
    count % 3의 값이 1일 때의 if문 분기
    count % 3의 값이 2일 때의 if문 분기
    이렇게 하면 3번 바꿀 수 있습니다.
    2013.07.12 14:31 신고
댓글쓰기 폼
공지사항
Total
3,536,478
Today
64
Yesterday
553
«   2021/10   »
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            
글 보관함