innerHTML
Element
속성. Element내에 포함된 HTML or XML 마크업을 가져오거나 태그와 함께 입력하여 내용을 직접 설정할 수 있음.
- DOM을 직접적으로 조작. 내부 HTML 코드를 JS코드에서 새 내용으로 쉽게 변경 가능하다.
document.documentElement.innerHTML = "<p>innerHTML</p>"
document.documentElement.innerHTML =
"<span style='color:blue'>innerHTML</span>"
document.body.innerHTML = "";
innerText
innerHTML
과 동일하게 Element
속성. 사용자에게 보여지는 text값들을 가져오거나 설정 가능.
document.documentElement.innerText = "innerText(넣을 텍스트를 입하면된다)"
document.documentElement.innerText = "<p>innerText</p>"
const innerT = document.getElementById('innerT');
innerT.innerText = "<div style='color:red'>innerText</div>";
console.log(innerT)
const innerH = document.getElementById('innerH');
innerH.innerHTML = "<div style='color:red'>innerHTML</div>";
console.log(innerH)
textContent
- Element가 아닌
Node
속성이다. 사용자에게 보여지는 text값만 읽어오는 innerText와는 달리 <script>, <style>
태그에 상관없이 해당 노드가 가지고 있는 텍스트 값을 모두 읽어온다.
- display : none; 으로 숨겨진 텍스트를 어떻게 가지고 오는지 각 속성의 차이점을 알 수 있음
HTML
<div id='content'>
안녕~
<span style='display:none'>innerText는 인식하지 못한다.</span>
</div>
script
const content = document.getElementById('content');
console.log(content.innerHTML);
-----------------------------------------------------
console.log(content.innerText);
-----------------------------------------------------
console.log(content.textContent);
차이점
- innerHTML과 innerText과 textContent 차이
- innerHTML은
요소 내에 있는 HTML과 XML 모두
를 의미
- innerText는
요소 내에서 사용자에게 보여지는 text
를 의미
- textContent는
script나 style 태그와 상관없이 해당 노드가 가지고 있는 text
를 의미
new Set()
- Set 객체는 ES6에서 등장한 중복을 제거한 값들의 집합이다.