innerText, innetHTML 차이

 

innerText와 innerHTML

: 태그안에 있는 값 또는 html요소를 가져오거나, 반대로 값을 세팅할때 사용

 

 

두 속성의 차이점

: 태그 내부의 값을 가져올때 그 값을 문자열로 인식할지 html태그로 인식할지의 차이

 

 

1. innerText

- innerText는 태그제외한 텍스트만 가지고 오거나 삽입한다.

- 문자열로 태그 구조를 생성하여 innerText 속성에 값을 대입하더라도 텍스트로 삽입된다.

 

//예시 소스코드

 

//결과코드

-> testMsg의 텍스트가 바뀐걸 알수가 있습니다.

 

 

innerText은 내부 값을 전부 문자열로 표시하기 때문에 html태그가 있더라도

그 문장 전체를 문자열로 인식해서 보여주게 된다.

 

 

 

2. innerHTML

- innerHTML은 HTML의 컨텐츠, 즉 내용에 접근할 수 있는 변수

 

[사용법]

부모요소.innerHTML = "생성할 태그";

 

: 부모요소에 문자열로 작성한 태그를 동적 생성

: 기존 부모요소 안쪽의 내용을 지우면서 새로 생성

 

innerHTML은 HTML 태그가 적용되어 표시됨

 

 

 

 

블로그참고

 

https://blog.naver.com/xowns4817/222157111921

innerHTML vs innerText 정리

 

https://hianna.tistory.com/480