JS [DOM TEXT]

InnerHTML, innerText, textContent HTML

* 요소의 내용을 가져오거나 수정하는 방식인 3가지 방법에 대해 알아보자

 

1. InnerHTML

기능 : 요소의 HTML 코드를 포함한 내용을 가져오거나 수정할 떄 사용한다.

• HTML 태그와 태그 안에 내용을 모두 포함한다.
• HTML을 추가할 때 문자열로 작성된 HTML 태그가 그대로 랜더링 된다.
• 보안에 주의해야한다. 사용자 입력을 InnerHTML 로 삽입하면 XSS 공격의 위험이 있다

// <div id="example"><p>안녕하세요!</p></div>
const exampleDiv = document.getElementById('example');

// innerHTML을 사용해 HTML 태그와 내용을 모두 가져옴
console.log(exampleDiv.innerHTML);  // "<p>안녕하세요!</p>"

// innerHTML을 사용해 HTML 구조를 포함하여 수정 가능
// 해당 태그를 사용하면 그 태그에 맞게 적용된다.
exampleDiv.innerHTML = '<p>새로운 내용!</p><strong>강조된 텍스트</strong>';

2. innerText

기능 : 요소의 텍스트 내용만 가져오거나 수정할 때 사용한다.

특징 : 

• 요소 내의 텍스트만 반환한다. HTML 태그는 무시되고, 화면에 랜더링된 텍스트 형태로만 가져온다.
• 사용자에게 화면에 보이는 그대로의 텍스트만 가져온다.
• CSS로 숨겨진 요소의 텍스트는 무시된다.

// <div id="example"><p>안녕하세요!</p></div>
const exampleDiv = document.getElementById('example');

// innerText를 사용해 HTML 태그는 무시하고 텍스트만 가져옴
console.log(exampleDiv.innerText);  // "안녕하세요!"

// innerText를 사용해 텍스트 내용만 수정 가능
exampleDiv.innerText = '새로운 텍스트!';

3. textContent

기능 : 요소의 텍스트 내용만 가져오거나 수정할 때 사용한다. (태그 무시)

// <div id="example"><p>안녕하세요!</p></div>
const exampleDiv = document.getElementById('example');

// textContent를 사용해 HTML 태그는 무시하고 텍스트만 가져옴
console.log(exampleDiv.textContent);  // "안녕하세요!"

// textContent를 사용해 텍스트 내용만 수정 가능
exampleDiv.textContent = '새로운 텍스트 내용!';

 

특징  

• 모든 텍스트를 가져온다 html 태그는 무시되며 텍스트만 반환
• CSS 로 숨겨진 텍스트도 포함하여 반환한다.
• 보이지 않는 텍스트까지 포함한 전체 텍스트를 가져올 때 유용하다.

 

결과값