안녕하세요.
디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.
이번 포스팅에서는 자바스크립트의 요소 노드 주요 프로퍼티에 다뤄볼 건데요.
그 중에서도 innerHTML, outerHTML, textContent의 사용 방법에 대해 공유하겠습니다.
innerHTML
- 요소 안의 html 자체를 문자열로 리턴.
- 태그와 태그 사이의 줄 바꿈이나 들여쓰기 모두 포함합니다.
- 요소 안의 정보 확인할 때 사용합니다.
- HTML을 수정할 때 자주 활용됩니다.
- 내부에 원래 가지고 있던 값을 새로운 값으로 교체하기 때문에 주의해 주세요.
const tooktak = document.querySelector('#뚝딱');
tooktak.innerHTML = '<li>자바스크립트도 뚝딱 해내자</li>';
// 해당 아이디의 요소를 없애고 이것만 넣기.
tooktak.innerHTML += '<li>자바스크립트도 뚝딱 해내자</li>';
// 해당 아이디의 요소들 그대로 두고 마지막 요소로 이것 추가.
// 기존 내용을 보존하려면
tooktak.innerHTML = '<li>처음</li> + tooktak.innerHTML';
tooktak.innerHTML = tooktak.innerHTML + '<li>끝</li>';
outerHTML
- 해당 요소를 포함한 전체의 html 코드를 문자열로 리턴합니다.
- 태그와 태그 사이의 줄 바꿈이나 들여쓰기 모두 포함합니다.
- 요소 안의 정보 확인할 때 사용됩니다.
- HTML을 수정할 때 자주 활용됩니다.
- 새로운 값을 할당할 경우 요소 자체가 교체되기 때문에 주의해 주세요.
const tooktak = document.querySelector('#뚝딱');
tooktak.outerHTML = '<li>자바스크립트도 뚝딱 해내자</li>'
// 기존 내용을 보존하려면
tooktak.outerHTML = '<p>이전</p>' + tooktak.outerHTML;
const newTooktak = documnet.querySelector('#뚝딱');
newTooktak.outerHTML = newTooktak.outerHTML + '<p>다음</p>';
textContent
- 요소 안에 있는 내용들 중에서 html을 제외한 텍스트 내용만 가져옵니다. (줄 바꿈이나 들여쓰기 모두 포함)
- innerHTML과 마찬가지로 요소 안의 내용이 수정됩니다.
- 말 그대로 텍스트만 다루기 떄문에 특수문자도 텍스트로 처리합니다.
- 태그를 입력해도 </>를 특수문자로 인식하여 텍스트로 출력합니다.
const tooktak = document.querySelector('#뚝딱');
tooktak.textContent = '할 수 있다 뚝딱!';
728x90
