javascript로 DOM을 조작하다보면 innerHTML, innerText, textContent 를 사용하게 되는데 비슷한 동작을 하지만 각각 어떤 차이가 있는 것인지 알아보도록 하자.
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 예제 연습장</title>
</head>
<body>
<div id="root">
<div class="innerHTML">innerHTML</div>
<div class="innerText" style="display: none">innerText</div>
<div class="textContent" style="display: none">textContent</div>
</div>
</body>
<script script src="./app.js" ></script>
</html>각각 사용해보기
innerHTML
| MDN
요소(element) 내에 포함 된 HTML 또는 XML 마크업을 가져오거나 설정한다.
값으로 DOMString을 넣어준다
const innerHTMLDiv = document.querySelector(".innerHTML");
console.log(innerHTMLDiv.innerHTML);
innerHTMLDiv.innerHTML = "바꿈";
console.log(innerHTMLDiv.innerHTML);
innerText
| MDN
요소와 그 자손의 렌더링된 텍스트 콘텐츠를 나타낸다.
사용자가 드래그로 긁어서 복붙할 수 있는 텍스트의 근삿값을 제공한다.
const innerTextDiv = document.querySelector(".innerText");
console.log(innerTextDiv.innerText);
innerTextDiv.innerText = "바꿨지롱";
console.log(innerTextDiv.innerText);
textContent
| MDN
Node와 그 자손의 텍스트 콘텐츠를 표현한다.
- 위의 innerHTML, innerText는 HTMLElement의 메서드이고 textContent는 Node의 메서드이다.
const textContentDiv = document.querySelector(".textContent");
console.log(textContentDiv.textContent);
textContentDiv.textContent = "바꿨어용";
console.log(textContentDiv.textContent);
이렇게 사용해서는 뭐가 다르다는 건지 알기 어렵다. 그래서 HTML 태그를 넣어주기로 했다.
본격적으로 비교해보기
innerHTML
innerHTMLDiv.innerHTML = `<ul><li>하나</li><li>둘</li></ul>`;
console.log(innerHTMLDiv.innerHTML);
console에는 넣어준 텍스트가 찍히지만 브라우저에는 HTML 문법으로 적용된 모습이다.
innerText
innerTextDiv.innerText = `<ul><li>하나</li><li>둘</li></ul>`;
console.log(innerTextDiv.innerText);
console에 찍힌 문자 그대로 브라우저에도 찍힌 모습이다.
인스펙터로 확인해봐도 실제로 태그가 생성되지 않았다.
textContent
textContentDiv.textContent = `<ul><li>하나</li><li>둘</li></ul>`;
console.log(textContentDiv.textContent);
innerText와 마찬가지로 console에 찍힌 문자 그대로 브라우저에 찍혔다
인스펙터로 확인해도 같은 모습이다.
그럼 이제 innerHTML은 알겠는데 innerText와 textContent의 차이는 뭘까?
차이를 확인해보기 위해 HTML 구조를 약간 바꿔줬다.
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 예제 연습장</title>
</head>
<body>
<div id="root">
<div class="innerHTML">innerHTML</div>
<div class="innerText" id="blue">
<style>
#blue {
color: blue
}
</style>
innerText
<span style="display: none;" id="blue">hide span</span>
</div>
<div class="textContent" id="red">
<style>
#red {
color: red
}
</style>
textContent
<span style="display: none">hide span</span>
</div>
</div>
</body>
<script src="app.js"></script>
</html>// app. js
const innerTextDiv = document.querySelector(".innerText");
console.log(innerTextDiv.innerText);
const textContentDiv = document.querySelector(".textContent");
console.log(textContentDiv.textContent);
결론
innerText
- 브라우저에 실제로 그려진 내용만(사용자가 드래그해서 복붙할 수 있는 내용만) 표기된다.
- style 태그로 작성된 내용, display:none으로 된 자식 등은 표기되지 않는다. (display: block 등 보이는 속성이라면 표기된다.)
textContent
- style 태그로 작성된 내용, display:none으로 된 보이지 않는 자식등 자신의 자식 요소도 표기된다.
