-
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
반응형'코딩스터디 > Javascript' 카테고리의 다른 글
DOM, 요소의 태그 속성 접근하기(getAttribute 등) (0) 2021.05.20 자바스크립트 event(addEventListener, e.page),currentTarget (0) 2021.05.19 자바스크립트 템플릿 리터럴 (0) 2021.05.19 DOM과 queryselector, querySelectorAll (0) 2021.05.18 자바스크립트 스코프(scope) (0) 2021.05.15 댓글