innerText vs outerText의 차이

요즘 Web 관련 일을 하고 있는데 HTML에서 innerText, innerHTML, outerText, outerHTML, textContent등에 대해서 궁금해졌습니다.

그래서 찾아봤는데 까먹기 딱 좋은 내용이라 다음에 또 찾아 볼 때가 100% 올꺼 같아서 정리해봤습니다.

위와 같은 상황에서 innerText/HTML, outerText/HTML, textContent를 해보면...

var temp = $("#something")
temp.innerText // Hello World!
temp.outerText // Hello World!
temp.textContent // Hello World!
 
temp.innerHTML // <p>Hello World!</p>
temp.outerHTML // <div id="something"><p>Hello World!</p></div>

과 같이 나옵니다.

innerText, outerText, textContent는 동일한 값이 나옵니다. 하지만! 속도는

textContent > innerText > outerText 순으로 빠르게 나옵니다. (결론, textContent를 쓰자)

그리고 위의 예는 한줄짜리 문장이여서 그렇지 여러줄인 경우 textContent는 내부 개행(</br>이 아닌 것)은 모두 한줄로 표시되지만,

innerText, outerText는 개행되서 표시됩니다.

그리고 innerHTML은 id="somethin"안에 있는 모든 HTML을 가져오고 outerHTML은 id="something"을 포함한 모든 HTML을 가져오게 됩니다. 필요에따라 적절히 쓰면 될꺼 같습니다~

끝.