[JS] innerHTML vs innerTEXT vs textContent 차이

728x90

01. HTML 요소의 내용

자바스크립트를 활용해서 HTML 요소 안의 내용을 동적으로 읽고 쓸 수 있습니다.

요소의 내용이 무엇일까? 에 대해서 초점을 맞추자면
1. 요소 안의 HTML 코드

2. 요소를 웹 페이지에 표시할 때의 텍스트 정보

3. 요소 객체 안의 노드의 계층 구조

라는 세가지 의미가 함축되어 있습니다.

1번의 코드는 innerHTML 프로퍼티로 읽고 쓸 수 있습니다.

2번의 텍스트 정보는 textContent와 innerText 프로퍼티를 사용해서 읽고 쓸 수 있습니다.

02. innerHTML

요소 객체의 innerHTML 프로퍼티는 그 HTML 요소의 내용을 가리키며, 이로써 HTML 요소의 내용을 읽거나 쓸 수 있습니다.

만약에 아래와 같이 id가 cards 인 노드를 잡아서 innerHTML을 JS로 바꾼다면?

console.log를 했을때 보이는 결괏값은

"◆다이아는 상인이라는 뜻입니다. "

라고 나올 것입니다.

<html>
	<body>
    	<p id="cards"> &hearts;하트는 <em>승려</em>라는 뜻입니다. </p> 
       	<script>
        	var para = document.getElementById("cards");
            para.innerHTML = "&diams;다이아는 <strong>상인</strong>이라는 뜻입니다.";
        </script>
        console.log(para.innerHTML);
    <body>
</html>

innerHTML 프로퍼티로 HTML 코드를 편집할 수 있습니다. 그러나 이 방법은 코드를 문자열로 다루어야 하므로 복잡한 구조를 가진 코드를 편집할 때는 적합하지 않습니다. innerHTML 프로퍼티는 간단한 내용을 편집하기에 좋습니다.

03. textContent

textContent 프로퍼티는 요소의 내용을 웹 페이지에 표시했을 때의 텍스트 정보를 표시합니다.

textContent 프로퍼티 값은 지정한 요소의 자식 노드인 모든 텍스트 노드를 연결한 값입니다.

또한 textContent 프로퍼티에 텍스트를 대입하면 요소의 내용을 텍스트로 변환할 수 있습니다.

이때 &, <, > 등의 HTML 특수문자가 이스케이프되어 HTML로 표시할 수 있는 문자열로 바뀝니다.

para.textContent =  "&diams;다이아는 <strong>상인</strong>이라는 뜻입니다.";

// innerHTML 의 경우를 살펴보자 (코드가 모두 출력된다) 
console.log(para.innerHTML);
-> &amp;diams;다이아는 &lt;strong&gt;상인&lt;/strong&gt;이라는 뜻입니다. 

// textContent 의 경우는 텍스트로 변환되어 그대로 출력된다. 
-> &diams;다이아는 <strong>상인</strong>이라는 뜻입니다.

03. innerText

textContent 프로퍼티는 IE9 이전 버전에서는 사용할 수 없습니다. 대신 IE9 이전 버전에서는 innerText 프로퍼티를 사용할 수 있습니다.

04. textContent 와 innerText의 차이

textContent와 innerText 프로퍼티는 거의 같은 일을 하지만 다음과 같은 차이점이 있습니다.

📝 textContent는 script 요소 안의 텍스트를 반환하지만 innerText는 반환하지 않는다.

📝 textContent는 공백 문자를 그대로 반환하지만 innerText는 남는 공백 문자를 제거한다.

📝 innerText는 table, tbody, tr 요소 등의 테이블 요소를 수정할 수 없다.

참고 문헌

📌 모던 자바스크립트 입문 책