[HTML] innerText, innerHTML 차이

왼쪽은 html코드, 오른쪽은 브라우저 상에서 화면구현이 된 모습이다.

<\script> func1()을 보자
[innerHTML 연습]이 출력된 div에 innerHTML로 내부값을 불러올 수 있다.
결과 : <h1>innerHTML연습</h1>이 콘솔창에 출력된다.
🎈이번엔 input type 태그와 함께 쓴 명령문을 innerHTML으로 넣어봤다.

<\script> func2()을 보자
[안녕하세요]가 출력된 div에 innerText로 내부값을 불러올 수 있다.
결과 : 안녕하세요가 콘솔창에 출력된다.
🎇이번엔 input type 태그와 함께 쓴 명령문을 innerText로 넣어봤다.

🎈위의 사진처럼 이름과 나이 옆에 각각 input type='text'로 태그가 적용되어 출력된 것을 볼 수 있다.

innerHTML은 태그값까지 불러오거나 태그값을 포함하여 삽입이 된다.

🎇위의 사진을 보면 이름 : <input type='text' ~~~>로 출력되어 태그가 적용되지 않고 텍스트 값으로 같이 출력된 것을 볼 수 있다.

innerText는 태그값을 인식하지 못하고 같이 출력하거나 태그 값을 인식하지 못하고 텍스트 값만 불러온다.

기술요약 : innerText는 사용자에게 보여지는 text값만 가져오고 innerHTML은 element내에 포함된 HTML 또는 XML마크업을 가져오거나 태그와 함께 입력하여 내용을 직접 설정할 수 있다.