innerHTML, innerText, textContent 그리고 value (작성중)

🌵 태그 내부에 값을 넣을 때

태그.innerHTML = '내용';
태그.innerText = '내용';
태그.textContent = '내용';

 

🌵 차이점

	innerHTML	innerText	textContent
공통점	• HTML에 텍스트를 추가한다. • 해당 엘리먼트의 텍스트 값을 반환 한다. • node나 element의 텍스트 값을 읽어오고 설정 가능하다.
차이점	• 자기 자신은 텍스트 값만, 자식들은 텍스트와 태그 값까지 모두 가져온다.	• 불필요한 공백을 제거하고 텍스트로 반환 함. • element 내에서 사용자에게 보여지는 텍스트를 읽어옴. • display: none; 으로 정의된 숨겨진 텍스트는 브라우저에서 사용자에게 보여지지 않는다. • 자기 자신과 자식 태그들의 텍스트 값만 가지고 오지만, 스타일링 정보는 제외하고 가져온다.	• 공백을 포함한 모든 텍스트를 그대로 가져옴. • 브라우저 호환성이 좋다. • innerText와 달리 <script>나 <style> 태그와 상관없이 해상 노드가 가지고 있는 텍스트 값을 그대로 읽는다. • display: none;과 같은 스타일이 적용된 문자열도 그대로 출력 됨. • 자기 자신과 자식 태그들의 텍스트 뿐만 아니라 줄바꿈, 띄워쓰기와 같은 스타일링 정보까지 같이 가져온다.

 

🌵 태그 내부의 값을 가져올 때

// element.textContent를 사용하는 경우
button태그.textContent;
div태그.textContent;
span태그.textContent;


// element.value를 사용하는 경우
input태그.value;
select태그.value;
textarea태그.value;

 

 

 

 

📚 참고 자료(출처)

• [자바스크립트] TextContent 그리고 InnerText 차이점 알아보기 (WEBISFREE.com)

• [Javascript] innerHTML, innerText, textContent 차이점 (어제 오늘 내일)