목차
- innerText 예제 - 요소의 텍스트 내용 반환
- innerText 예제 - 요소의 텍스트 내용 설정
- 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 속성: 모든 텍스트를 가져오며 성능이 더 우수함.
