innerHtml/innerText/textContent의 차이점

돌리의 하루·2023년 1월 5일
0
post-thumbnail

💚innerHtml

해당 Element의 HTML, XML을 읽어오거나, 설정
innerText와 다른점은, 사용자가 보여지는 텍스트 값 뿐 아니라 영역 안에 있는
html의 전체 내용을 보여준다는점!
위 코드의 결과값은 밑과 같다

망고중 제일은!!!!!     애플망고
<span style='display:none'>사실 망고는 강아지다</span>

💜innerText

사용자에게 보여지는 텍스트 값을 읽어온다!
display:none으로 설정된 텍스트 값은 불러오지 않는다.
💫공백을 인식하지 않고 붙여쓴다
위 코드의 결과값은 밑과 같다

망고중 제일은!!!!! 애플망고

🤎textContent

'Node'의 속성. innerText가 tag값과 그 내용을 모두 가져온다면,
textContent는 태그 값과는 상관없이 노드가 가지고 있는 텍스트 값을 그대로 가져 온다.
(공백도 그대로 가져옴)

 망고중 제일은!!!!!     애플망고
 사실 망고는 강아지다
profile
진화중인 돌리입니다 :>

0개의 댓글