far

[Javascript] innerHTML, innerText, textContent 차이 본문

Javascript

[Javascript] innerHTML, innerText, textContent 차이

Eater 2023. 3. 30. 05:19

innerHTML, innerText, textContent 모두 HTML의 텍스트값에 접근하고 수정 할 수 있지만 약간의 차이가 있다.

 

1. innerHTML

innerHTML은 엘리먼트의 속성으로 엘리먼트내에 포함 된 HTML 또는 XML 마크업을 가져오거나 설정할 수 있다.

// 기본 문법
const content = element.innerHTML;

element.innerHTML = htmlString;


// 활용
const animal = "Cat";
el.innerHTML = animal;

animal = "<script>alert('CATS')</script>";
el.innerHTML = animal;

위의 '활용' 코드 같은 경우 innerHTML로 삽입된 <script>태그가 실행되지 않도록 HTML5에서 지정해주어 XSS공격에 대한 안전하지만, 만약 <script>태그를 사용하지 않고, innerHTML을 사용해 제어할 수 없는 문자열을 값으로 입력하면 보안이 취약해진다. 따라서 일반 텍스트를 삽입할 때 innerHTML대신 textContent를 사용하길 권장한다.

2. innerText

innerText는 엘리먼트의 속성으로 엘리먼트와 그 자손의 렌더링 된 텍스트 컨텐츠를 나타낸다.

1번의 innerText와 비교해보면 어떤 차이가 있는지 명확하게 이해할 수 있다.

<body>
    <div id='content'>
      <button type="button">Example</button>
    </div>
</body>

<script>
    const element = document.getElementById('content');
    element.addEventListener('click', () => {
        console.log(element.innerText) // Example
        console.log(element.innerHTML) // <button type="button">Example</button>
    })
</script>

 

값을 설정할 때도 innerText는 텍스트값만 설정하기 때문에 태그를 문자열로 인식한다.

3. textContent

textContent는 노드의 속성으로 마크업 태그를 제외한 모든 문자열에 접근하고 수정할 수 있다. 태그에 상관없이 해당 노드가 가지고 있는 텍스트 값을 읽어오기 때문에 display: none이 설정된 태그의 텍스트 값도 출력이 된다.

<body>
    <div id='content'>
        <button type="button">Example</button>
        <p style="display: none;">Hidden</p>
    </div>
</body>

<script>
    const element = document.getElementById('content');
    element.addEventListener('click', () => {
        console.log(element.innerText) // Example
        console.log(element.textContent) // Example   Hidden
    })
</script>

또한 textContent는 엔터를 반환한다.

<body>
    <div id='content'>
        <button type="button">Example
            
            Enter
        </button>
    </div>
</body>

<script>
    const element = document.getElementById('content');
    element.addEventListener('click', () => {
        console.log(element.innerText)
        // Example Enter
        
        console.log(element.textContent)
        /* Example
        
               Enter*/
    })
</script>

 

 

 

 

참고: MDN 사이트

 

'Javascript' 카테고리의 다른 글

[Javascript] 외부 클릭시 태그 닫기 + 커스텀 셀렉트  (0) 2023.04.05
[Javascript] 클로저  (0) 2023.03.30
[Javascript] 실행 컨텍스트  (0) 2023.03.26
[Javascript] This에 대하여  (0) 2023.03.25
[Javascript] 엄격 모드(Strict mode)  (0) 2023.03.24
'Javascript' Related Articles more
Comments