[JavaScript] textContent, innerHTML, innerText, outerHTML

JavaScript 에서 텍스트를 입력 할 수 있는 방법은 여러가지가 있다

 

1. createTextNode를 사용하여 새로운 노드를 만들고 기존 요소 아래에 appendChild 로 직접 삽입

2. 이미 만들어진 태그에 .textContent 사용하여 바로 설정하거나 가져오기

3. 이미 만들어진 태그에 .innerHTML 사용하여 바로 설정하거나 가져오기

4. 이미 만들어진 태그에 .innerText 사용하여 바로 설정하거나 가져오기

 

 

그리고 비슷하게 보이는 outerHTML이라는 태그도 있음

 

이 다섯가지를 간단히 정리하자면

createTextNode : 태그를 해석하지 않고 텍스트 그대로 표시

textContent : 순수 텍스트만 넣거나 읽기, 히든 텍스트도 포함, 줄바꿈 제거, 태그 모두 무시됨

innerHTML : HTML 태그 포함한 문자열 그대로 저장, HTML 구조 보존

innerText: 화면에 보이는 텍스트 기준, 줄바꿈 반영됨. 태그 문자는 그대로 저장

outerHTML : 자기 자신과 자식태그 전부를 추출

 

 

항목	innerText	textContent	innerHTML	createTestNode()
목적	보이는 텍스트만 넣거나 읽기	전체 텍스트를 넣거나 읽기	HTML 구조 자체를 넣거나 읽기	텍스트 노드를 생성해서 삽입
HTML 태그 해석	❌ (문자그대로 표시)	❌	✅ (실제 태그로 인식)	❌
히든 요소의 텍스트 포함	❌ (display: none 무시됨)	✅ 포함함	✅ 포함함	텍스트만 삽입 (노드 수준이므로 상관없음)
줄바꿈 처리	✅ (\n → 줄바꿈 적용)	❌ (줄바꿈 문자 있어도 반영 안됨)	✅ (<br> 등 직접 넣음)	❌ (줄바꿈 문자 그대로 보임)
DOM 요소 덮어쓰기	✅ (전체 덮어씀)	✅ (전체 덮어씀)	✅ (전체 덮어씀)	❌ (기존 요소에 추가됨)
스크립트 실행 위험(XSS)	❌ 없음 (안전)	❌ 없음 (안전)	⚠️ 있음 (주의해야 함)	❌ 없음 (안전)
쓰기 방식	el.innerText = ...	el.textContent = ...	el.innerHTML = ...	el.appendChild(...)
읽기 방식	el.innerText	el.textContent	el.innerHTML	노드.nodeValue 등 (간접적)
CSS 스타일 영향	✅ 받음 (보이는 것 기준)	❌ 무시함	❌ 무시함	❌ 무시함
사용하는 상황	화면에 보이는 텍스트만 다룰 때	전체 텍스트를 안전하게 처리할 때	HTML 구조를 조작하거나 넣을 때	HTML을 절대 해석시키지 않도록 안전하게 텍스트 추가 할 때

 

 

 

줄바꿈 문자에 관한 내용이 글로만 보기에 헷갈려서 다양한 경우를 시도해 보았다

1. innerHTML에 <br>입력하기

let test = document.querySelector("#test");	//undefined


// 1. innerHTML에 <br>태그 입력시
test.innerHTML = "안녕<br>쏘쏘";

// HTML Tree :
<div id="Test">
"안녕"
<br>
"쏘쏘"
</div>

console.log('innerHTML:', test.innerHTML);
console.log('innerText:', test.innerText);
console.log('textContent:', test.textContent);
console.log('outerHTML:', test.outerHTML); 

VM1034:1 innerHTML: 안녕<br>쏘쏘 // HTML 문자열 그대로 저장
VM1034:2 innerText: 안녕	// <br>이 줄바꿈으로 해석됨
쏘쏘
VM1034:3 textContent: 안녕쏘쏘 // 텍스트만 출력
VM1034:4 outerHTML: <div id="test">안녕<br>쏘쏘</div>



// 2. innerText에 <br>태그 입력시
test.innerText = "안녕<br>쏘쏘";

// HTML Tree : <div id="test">안녕<br>쏘쏘</div>

console.log('innerHTML:', test.innerHTML);
console.log('innerText:', test.innerText);
console.log('textContent:', test.textContent);
console.log('outerHTML:', test.outerHTML);

VM1077:1 innerHTML: 안녕&lt;br&gt;쏘쏘	// <>이 excape code 사용하여 저장됨
VM1077:2 innerText: 안녕<br>쏘쏘	// 태그 문자열도 그대로 보여짐
VM1077:3 textContent: 안녕<br>쏘쏘	// innerText와 동일하게 저장됨
VM1077:4 outerHTML: <div id="test">안녕&lt;br&gt;쏘쏘</div>



// 3. innerHTML에 \n(줄바꿈) 입력시
test.innerHTML = "안녕\n쏘쏘";

// HTML Tree : <div id="test">안녕 쏘쏘</div>
// "\n" (줄바꿈 문자)가 포함되지만, HTML 렌더링에서는 새 줄이 반영되지 않고 공백처럼 취급

console.log('innerHTML:', test.innerHTML);
console.log('innerText:', test.innerText);
console.log('textContent:', test.textContent);
console.log('outerHTML:', test.outerHTML);

VM1100:1 innerHTML: 안녕	// 저장된 값은 HTML 마크업 문자열 그대로
쏘쏘
VM1100:2 innerText: 안녕 쏘쏘	// 줄바꿈이 자동으로 공백으로 변환	
VM1100:3 textContent: 안녕	// 텍스트 노드 값 그대로 반환(\n도 포함)
쏘쏘
VM1100:4 outerHTML: <div id="test">안녕
쏘쏘</div>


// 4. innerText에 \n(줄바꿈) 입력시
test.innerText = "안녕\n쏘쏘";

// HTML Tree :
<div id="Test">
"안녕"
<br>
"쏘쏘"
</div>


console.log('innerHTML:', test.innerHTML);
console.log('innerText:', test.innerText);
console.log('textContent:', test.textContent);
console.log('outerHTML:', test.outerHTML);

VM1127:1 innerHTML: 안녕<br>쏘쏘 // \n이 HTML 구조에서는 <br> 형태로 변환
VM1127:2 innerText: 안녕	// \n이 그대로 저장되어 innerText 반환 시 줄바꿈 포함
쏘쏘
VM1127:3 textContent: 안녕쏘쏘	// \n은 공백처럼 처리
VM1127:4 outerHTML: <div id="test">안녕<br>쏘쏘</div>
// 내부 HTML <br>로 변환된 구조 저장

 

 

 

아 이거 하나하나 하고보니까 더 헷갈리네...

일단 여기까지 하고 넘어가야지