이번에는 자바스크립트에서 두 번째로 많이 사용되는 용도를 공부해 볼거야.
자바스크립트를 이용해서 div 또는 p 태그 안의 문장 내용을 바꾼다던지 서버에서 가져온 내용으로 최신글을 보여 준다던지 이러한 역할을 하는 작업이야.

학습 초기에 document.write() 명령으로 브라우저에 문장을 출력할 수 있지만 실제로는 그리 자주 사용하지 않는다고 했던 말 기억나?
바로 이번 장에서 배우는 방법을 많이 사용하기 때문이야.

■ innerHTML

innerHTML 은 특정 div 나 p 같이 Html 내용이 들어가는 요소 안의 문장을 바꿔치는 속성이야.
직접 따라해 봐야 쉽게 이해 돼.
전장 부터 따라하던 js.html 문서의 본문 자리의 [제목]을 바꿔 보자구.

1. 상단에 아래와 같은 버튼을 추가해.

버튼을 클릭하면 subject() 함수가 실행 되겠지?

	<button onclick="subject()">제목 바꾸기</button>

2. 하단에 다음 함수를 작성해.

function subject() {
	let s = document.querySelector('#content h2');
	s.innerHTML = '<h5>개나리</h5>';
}

이제 브라우저에서 새로고침후 [제목바꾸기] 버튼을 클릭해봐.
잘 되지? (작동 안하면 어딘가 오타가 있을거야. 개발자 도구에서 확인해 봐..)

우선 querySelector 를 이용해서 id="content" 인 div 안에 있는 h2 태그를 선택요소로 변수 s 에 지정했어.
이런 식으로 특정 id, class 안에 포함된 다른 요소를 지정할 수 있어.

그런데 특정 요소를 선택하고 내용을 바꿀 때 꼭 이렇게 let s 처럼 변수를 지정해서 사용해야 할까?
아래와 같이 바꿔봐.

function subject() {
	document.querySelector('#content h2').innerHTML = '<h5>개나리</h5>';
}

이렇게 선택요소에 붙여서 innerHTML 속성을 지정하고 직접 값을 입력해도 돼.
위와 같이 선택 요소에 대해 조작할 내용이 1개 뿐이면 위와 같이 사용해도 돼.
그러나 조작할 명령이 많으면 변수에 대응해 두고 속성이나 명령을 내리면 타이핑도 줄고 보기에도 좋아.

기왕 하는 김에 본문 내용도 바꿔 볼까?

3. 함수를 아래와 같이 수정해.

function subject() {
	document.querySelector('#content h2').innerHTML = '<h5>개나리</h5>';
	let note = document.querySelector('#note');
	note.innerHTML = '나리 나리 개나리<br>입에 따다 물고요<br>개나리때 뽕뽕뽕<br>봄나들이 갑니다.'
}

제목과 함께 내용까지 바뀌는 것을 확인할 수 있어.

■ innerText , textContent

선택 요소의 내용을 바꾸는 방법은 innerHTML 이외에도 innerText , textContent 두 개가 더 있어.
일반적으로 innerHTML 이 가장 많이 사용되지만 경우에 따라 태그가 적용되면 안된다던지, 줄바꿈이나 공백(스페이스)가 여러 개 들어간 문장을 그대로 보여 줄 필요가 있을 때는 innerText , textContent 를 사용할 수도 있어.
차이점은 여러분이 직접 바꿔 보면서 확인해 알겠지?
사용할 때 대소문자 주의해... 자바스크립트는 변수나 명령의 대소문자를 구분한다고 했지?

차이점에 대해서 잘 정리한 블로그를 소개해 볼께.. : https://blog.naver.com/woori8806/222645113032