티스토리 뷰

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>


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


오늘은 이만 끝~~







댓글