요소 노드 (텍스트) (inner/outerHTML, textContent)
'인터렉티브 자바스크립트' 강의를 들으며 정리한 요소 노드를 다루는 방법에 대해 정리하였습니다.
요소 노드 다루기
- 요소 노드 만들기:
document.createElement('태그이름') - 요소 노드 꾸미기:
element.textContent, element.innerHTML, ... - 요소 노드 추가 혹은 이동하기:
element.prepend, element.append, element.after, element.before - 요소 노드 삭제하기:
element.remove()
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS with Codeit</title>
</head>
<body>
<div id="content">
<h2 id="title-1">Cat-1</h1>
<ul id="list-1">
<li>Ragdoll</li>
<li>British Shorthair</li>
<li>Scottish Fold</li>
<li>Bengal</li>
<li>Siamese</li>
<li>Maine Coon</li>
<li>American Shorthair</li>
<li>Russian Blue</li>
</ul>
<h2 id="title-2">Cat-2</h1>
<ul id="list-2">
<li>Sphynx</li>
<li>Munchkin</li>
<li>Persian</li>
<li>Norwegian Forset</li>
<li>Turkish Angora</li>
<li>Bombay</li>
<li>Selkirk Rex</li>
<li>Munchkin</li>
</ul>
</div>
<script src="index.js"></script>
</body>
</html>
1. element.innerHTML
- 요소 노드 내부의 HTML 코드를 문자열로 리턴해 줍니다. (내부에 있는 줄 바꿈이나 들여쓰기 모두 포함합니다.)
const myTag = document.querySelector('#list-1');
// innerHTML
console.log(myTag.innerHTML);
- 요소 안의 정보를 확인할 수도 있지만, 내부의 HTML 자체를 수정할 때 좀 더 자주 활용됩니다. (내부에 있던 값을 완전히 새로운 값으로 교체하기 때문에 주의해서 사용해야해요!)
const myTag = document.querySelector('#list-1');
// innerHTML
console.log(myTag.innerHTML);
myTag.innerHTML = '<li>Exotic</li>';
console.log(myTag.innerHTML);
2. element.outerHTML
- 요소 노드 자체의 전체적인 HTML 코드를 문자열로 리턴해줍니다. (내부에 있는 줄 바꿈이나 들여쓰기 모두 포함합니다.)
const myTag = document.querySelector('#list-1');
// outerHTML
console.log(myTag.outerHTML);
outerHTML은 새로운 값을 할당할 경우 요소 자체가 교체되어 버리기 때문에 주의해야 합니다.
const myTag = document.querySelector('#list-1');
// outerHTML
console.log(myTag.outerHTML);
myTag.outerHTML = '<ul id="new-list"><li>Exotic</li></ul>';
//<ul></ul>을 작성하지 않으면 리스트가 아닌 일반 텍스트처럼 보임
3. element.textContent
- 요소 안의 내용들 중에서 HTML 태그 부분은 제외하고 텍스트만 가져옵니다. (내부에 있는 줄 바꿈이나 들여쓰기 모두 포함합니다.)
const myTag = document.querySelector('#list-1');
// textContext
console.log(myTag.textContent);
- 새로운 값을 할당하면
innerHTML과 마찬가지로 내부의 값을 완전히 새로운 값으로 교체 합니다.
const myTag = document.querySelector('#list-1');
// textContext
console.log(myTag.textContent);
myTag.textContent = 'new text!';
- 하지만
textContent는 말그대로 텍스트만 다루기 때문에, 특수문자도 그냥 텍스트로 처리한다는 점, 꼭 기억해주세요!
const myTag = document.querySelector('#list-1');
// textContext
console.log(myTag.textContent);
myTag.textContent = '<li>new text!</li>';
const myTag = document.querySelector('#list_1');
// innerHTML
console.log(myTag.innerHTML);
// myTag.innerHTML = '<li>Hello</li>';
// myTag.innerHTML += '<li>Hello</li>';
//outerHTML (해당요소를 포함한 전체 HTML코드를 리턴)
console.log(myTag.outerHTML);
// myTag.outerHTML = '<ul id = "new-list"><li>Exotic</li></ul>'
// textContent
console.log(myTag.textContent);
// myTag.textContent = '<li>new text!</li>'
// textContent는 특수문자도 문자로 나타냄
// innerHTML보다 textContent를 사용하면
// 원하지 않는 HTML 코드가 웹 페이지에 추가되는 것을 방지 할 수 있음