JavaScript innerHTML, innerText 및 textContent

Javascript에는 DOM에서 HTML 요소의 내용을 설정하거나 반환하는 데 사용할 수 있는 세 가지 속성인 innerHTML, innerText 및 textContent가 있습니다. 차이점이 확실하지 않고 어떤 것을 사용해야 하는지 궁금하다면 다음 비교가 도움이 되기를 바랍니다.

(1) innerHTML 속성은 새로운 HTML 콘텐츠가 있는 요소의 콘텐츠를 설정하고 반환합니다.

// Setting text with innerHTML:
const example = document.getElementById('example')
example.innerHTML = "<p>This is <strong>my</strong> paragraph.</p>"

HTML5는 innerHTML과 함께 삽입된 <script> 태그가 실행되는 것을 방지하지만 innerHTML을 사용하여 Javascript를 사용하여 문자열을 설정할 때마다 여전히 보안 위험이 있습니다. 사이버 범죄자는 <script>를 사용하지 않고 HTML 페이지의 콘텐츠를 다시 작성하거나 브라우저를 악성 코드가 있는 다른 페이지로 리디렉션하지 않고 Javascript 코드를 포함할 수 있습니다. 이러한 이유로 일반 텍스트를 삽입할 때 innerHTML을 사용하지 않는 것이 좋습니다.

innerHTML 및 XSS(교차 사이트 스크립팅) 공격에 대해 자세히 알아보려면 이 게시물 끝에 있는 리소스 링크를 참조하세요.

// HTML5 prevents malicious <script> from executing:
// alert WILL NOT show
const example1 = "<script>alert('I am an annoying alert!')</script>"
el.innerHTML = example1 

const example2 = document.getElementById('example2')
example2.innerHTML = '<script deferred>alert("XSS Attack");</script>'


// Examples of cybercriminals embedding Javascript without <script>:
// alert WILL show
const example3 = "<img src='x' onerror='alert(1)'>"
el.innerHTML = example3 

const example4 = document.getElementById('example4')
example4.innerHTML = '<img src=x onerror="alert(\'XSS Attack\')">'

<img src=j&#X41vascript:alert('test2')>

<img src="http://url.to.file.which/not.exist" onerror=alert(document.cookie);>

<button onmouseover=alert('Wufff!')>click me!</button>

(2) innerText 속성은 <script> 및 <style> 요소를 제외한 모든 요소의 내용을 반환합니다. 반환된 콘텐츠는 텍스트를 강조 표시한 다음 복사하여 붙여넣는 것과 유사하게 서식이 없는 일반 텍스트로 표시됩니다. 당신이 보는 것은 당신이 얻는 것입니다.

innerText 사용의 한 가지 단점은 CSS 스타일을 인식하기 때문에 해당 값이 리플로우를 트리거하여 성능이 저하된다는 것입니다. 리플로우는 브라우저가 문서를 다시 렌더링하기 위해 페이지 요소를 다시 계산하는 경우입니다. 리플로우를 트리거하는 인스턴스에는 브라우저 창 크기 조정 또는 DOM의 요소 변경이 포함됩니다. 리플로우는 계산 비용이 많이 들고 속도, 효율성 및 사용자 경험을 개선하기 위해 최소화해야 합니다.

참고: innerText 속성은 Internet Explorer 9 및 이전 버전에서 지원되지 않습니다.

// Setting text with innerText:
const example = document.getElementById('example')
example.innerText = "text"

(3) textContent 속성은 모든 요소 내부에 스타일이 있는 원시 콘텐츠를 반환하지만 HTML 요소 태그는 제외합니다. 여기에는 <script> 및 <style> 요소, 공백, 줄 바꿈 및 캐리지 리턴이 포함됩니다. innerHTML과 달리 textContent는 값이 HTML로 구문 분석되지 않기 때문에 더 나은 성능을 제공합니다. 이러한 이유로 textContent를 사용하면 XSS(교차 사이트 스크립팅) 공격도 방지할 수 있습니다. innerText와 달리 textContent는 CSS 스타일을 인식하지 않으며 리플로우를 트리거하지 않습니다. 모든 Node 객체에는 textContent가 있는 반면 HTMLElement 객체에만 innerText가 있습니다.

참고: textContent 속성은 Internet Explorer 8 및 이전 버전에서 지원되지 않습니다.

// Setting text with textContent:
const example = document.getElementById('example')
example.textContent = "word"

아래 예는 세 가지 속성 각각이 <p> 요소의 내용을 반환하는 방법을 보여줍니다.

<p id="demo"> This element has extra spacing   and contains <span>a span element</span>.
</p>

function getInnerHtml() {
  console.log(document.getElementById("demo").innerHTML)
}

innerHTML returns: 
" This element has extra spacing   and contains <span>a span element</span>."
/* 
The innerHTML property returns the text, spacing, and inner HTML element tags.
*/



function getInnerText() {
  console.log(document.getElementById("demo").innerText)
}

innerText returns: 
"This element has extra spacing and contains a span element."
/* 
The innerText property returns just the visible text, 
without spacing or inner HTML element tags.
*/



function getTextContent() {
  console.log(document.getElementById("demo").textContent)
}

textContent returns: 
" This element has extra spacing   and contains a span element."
/* 
The textContent property returns the text and spacing, 
but without the inner HTML element tags.
*/

이제 Javascript에서 텍스트를 반환하고 설정하는 데 사용할 수 있는 모든 옵션 간의 차이점을 알았으므로 콘텐츠 요구 사항에 가장 적합한 옵션을 사용하십시오.

자원:
https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#Differences_from_innerText
http://perfectionkills.com/the-poor-misunderstood-innerText/
https://kellegous.com/j/2013/02/27/innertext-vs-textcontent/
https://developers.google.com/speed/docs/insights/browser-reflow
https://frontendmasters.com/courses/web-performance/layouts-and-reflows/
https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting
https://www.owasp.org/index.php/Cross-site_Scripting_(XSS)