[DOM_Element] JS - innerText 속성 ★★ - 요소의 텍스트(문자열) 내용과 모든 하위 항목 설정/반환. (= innerText속성 = 이너텍스트 속성) (IE10 이상)

목차

1. innerText 예제 - 요소의 텍스트 내용 반환
2. innerText 예제 - 요소의 텍스트 내용 설정
3. innerText / textContent 차이점

innerText 예제 - 요소의 텍스트 내용 반환

 

<button onclick="homzzang()" id="hz">홈짱닷컴 Homzzang.com</button>

<p id="demo"></p>

<script>

function homzzang() {

  var x = document.getElementById("hz").innerText;

  document.getElementById("demo").innerHTML = x;  

}

</script>

 

결과보기

---

PS. 아래처럼, 짧게 표현도 가능. 관련글

 

<button onclick="homzzang()" id="hz">홈짱닷컴 Homzzang.com</button>

<p id="demo"></p>

<script>

function homzzang() {

  document.getElementById("demo").innerHTML = hz.innerText;  

}

</script>

 

 

결과값: 홈짱닷컴 Homzzang.com

innerText 예제 - 요소의 텍스트 내용 설정

 

<button id="hz">홈짱닷컴</button>

<p id="demo"></p>

<script>

hz.innerText="Homzzang.com";

</script>

 

결과보기

결과값: Homzzang.com

innerText / textContent 차이점

1. innerText 속성

• 스타일 반영: 요소 스타일에 따라 보이는 텍스트만 가져옴. (예) 'display: none'으로 숨겨진 텍스트는 포함 안 됨.
• HTML 요소 처리: HTML 태그를 무시하고 보이는 텍스트만 반환함.
• 공백 처리: 여러 개의 공백이나 줄 바꿈이 하나로 압축되어 반환될 수 있음.
• DOM 레이아웃 반영: 레이아웃을 계산해야 하므로, 성능이 더 느릴 수 있음.

 

2. textContent 속성

• 스타일 무시: 요소의 모든 텍스트를 가져옴. (숨겨진 텍스트도 포함)
• HTML 요소 처리: HTML 태그를 무시하고 텍스트만 반환.
• 공백 처리: 모든 공백과 줄 바꿈을 그대로 유지함.
• 성능: DOM 레이아웃을 계산하지 않으므로 일반적으로 innerText보다 성능이 더 좋음.

---

[요약정리]

• innerText 속성: 보이는 텍스트만 가져오며 스타일에 따라 다르게 동작.
• textContent 속성: 모든 텍스트를 가져오며 성능이 더 우수함.