자바스크립트 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) 결과물