자바스크립트 innerHTML 초간단 예제와 설명!



 자바스크립트 데이터 화면 출력

HTML은 코딩한 것을 화면에 출력하는 마크업언어 입니다.
자바스크립트는 프로그래밍 언어로 데이터 등을 출력하려면
관련 명령어를 사용해야 합니다.

데이터 디스플레이와 관련된 명령어는 아래와 같습니다.

● document.write( )  
: ()안에 것을 화면에 출력하라는 메서드
window.alert()     
: 경고창을 띄워 ()안의 것을 출력하라는 메서드
 innerHTML=" "       
: 예를 가지고 이해하는 것이 빠르다. 
예를 들어 HTML로 [홍길동]이라는 콘텐츠를 화면에 출력하였다.
이 HTML 요소에 접근하여 [홍길동]을 [이순신]으로 바꿔 출력하게 만들려면 이 속성을 사용해야 한다. 그리고 HTML 요소에 접근하려면 document.getElementById 메서드를 함께 사용한다.


자바스크립트 innerHTML 초간단 예제와 설명!

오늘은 innerHTML에 대하여 자세히 공부해 보자.

1. 아래와 같이 [홍길동] 텍스트를 출력하는 간단한 HTML 문서가 있다.

2. 자바스크립트를 이용하여[홍길동]을 [이순신]으로 바꿔 화면에 출력해 보자.
(1) [홍길동]을 출력하는 HTML 요소에 접근하자. 이 요소의 id는 'name'이다.

<script>

document.getElementById('name')

</script>


(2) 변경할 텍스트 [이순신]을 코딩하자. 

<script>

document.getElementById('name).innerHTML="이순신"

</script>


(3) 결과물


  Comments,   0  Trackbacks
  • JH
    오타났어요~~

    'name --> 'name'
  • JH오타맞네요
    document.getElementById('name).innerHTML="이순신";

    잘 안보일 수 있는데, 위 코드중 name을 감싸는 부분에 작은 따옴표가 빠져있으니 복붙할때 오류난다는 의미 같군요.

    'name --> 'name' // 뒤에 작은 따옴표 추가
  • HTMLCHOBO
    <div id="list">Buy me a new computer.</div>
    <script>
    var showList=document.getElementById("list");
    alert(showList.innerHTML);
    </script>


    라고 작성했는데
    alert()에서
    alert(showList.innerHTML)이랑
    alert(showList)로 입력했을때의 차이점이 뭔가요?
    제 상식으로는 showList라는 변수를
    document.getElement("list");로 했으니
    .innerHTML이 없어도 당연히 id가 list인 <div>안에 있는내용이 출력되어야 하는데 오류가 뜨네요?
  • 섹스
    앙개굳지
댓글 쓰기