1. innerText
화면에 보이는 텍스트만 반환한다. (숨겨진 요소는 무시)
<body>
<p id="text">hello world <span style="display: none">hidden text</span></p>
<script>
const text = document.getElementById("text");
console.log(text.innerText); // hello world
</script>
</body>2. textContent
node 내에 포함되어있는 모든 텍스트를 반환한다. (숨겨진 요소도 포함)
<body>
<p id="text">hello world <span style="display: none">hidden text</span></p>
<script>
const text = document.getElementById("text");
console.log(text.textContent); // hello world hidden text
</script>
</body>3. innerHTML
HTML 마크업을 포함한 내용을 반환한다. (숨겨진 요소도 포함)
<body>
<p id="text">hello world <span style="display: none">hidden text</span></p>
<script>
const text = document.getElementById("text");
console.log(text.innerHTML); // hello world <span style="display: none">hidden text</span>
</script>
</body>4. outerHTML
innerHTML은 HTML 마크업이 포함된 요소 내부를 반환한다면,
outerHTML은 요소 내부를 감싸고 있는 HTML 마크업까지도 포함하여 반환한다.
<body>
<p id="text">hello world <span style="display: none">hidden text</span></p>
<script>
const text = document.getElementById("text");
console.log(text.outerHTML); // <p id="text">hello world <span style="display: none">hidden text</span></p>
</script>
</body>5. content
template 태그의 하위 노드를 가져올 때 사용하는 속성이다.
6. insertAdjacentHTML
HTML을 지정된 위치에 삽입하고자 할 때 사용한다.