안녕하세요, 오늘은 innerHTML, outerHTML, textContent에 대해 정리하겠습니다.
◆ innerHTML
-. 요소 노드 내부의 HTML 코드를 문자열로 리턴합니다. 아래 코드에서 myTag는 querySelector에 의해 <ul> 태그가 됩니다. 여기서 myTag의 innerHTML를 console.log로 출력하면 <ul> 아래의 HTML 코드를 출력해줍니다.
<!-- HTML -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>프로그래밍 언어</title>
</head>
<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="codeit.js"></script>
</body>
</html>
<!-- JS -->
const myTag = document.querySelector('#list-1'); // myTag는 <ul id="list-1">가 된다
console.log(myTag.innerHTML); // 리스트 내부 출력
출력뿐만 아니라 HTML 자체를 수정할 수도 있습니다. (기존에 있던 값을 새로운 값으로 교체하는 것이므로 주의!)
위의 HTML 코드는 그대로 두고 아래에 innerHTML을 사용해 새로운 값을 할당해서 확인해 보겠습니다.
<!-- JS -->
const myTag = document.querySelector('#list-1'); // myTag는 <ul id="list-1">가 된다
console.log(myTag.innerHTML); // 리스트 내부 출력
myTag.innerHTML = "Hello World" // myTag의 내용을 바꿔준다!
console.log(myTag.innerHTML); // 바뀐 내용(Hello World)이 출력됩니다 
위의 예시에서 확인할 수 있듯 HTML 코드를 직점 수정하지 않고 자바스크립트를 이용해 내용을 바꿀 수 있습니다!
◆ outerHTML
-. 요소 노드 자체의 전체적인 HTML 코드를 문자열로 리턴해줍니다. (내부의 줄 바꿈이나 들여쓰기 포함)
위의 innerHTML만 출력한 것과는 다르게 myTag인 <ul> 태그도 출력이 되는 것이 확인됩니다.
추가로 새로운 값을 할당하는 것도 가능한데요, 새로운 값을 할당할 시 요소자체가 교체됩니다!
<!-- JS -->
const myTag = document.querySelector('#list-1'); // myTag는 <ul id="list-1">가 된다
console.log(myTag.outerHTML); 
교체되는 것은 이해하기 쉽도록 innerHTML과 비교하여 보여드리겠습니다!
innerHTML에 할당했을 때는 ul 태그는 그대로 있고 내부만 변경이 되고, outerHTML에 할당했을 때는 ul 태그가 없어지면서 변경이됩니다!
<!-- JS -->
const myTag = document.querySelector('#list-1');
myTag.innerHTML = "Hello World" // innerHTML -> ul 태그 내부가 바뀐다!
<!-- JS -->
const myTag = document.querySelector('#list-1');
myTag.outerHTML = "Hello World" // outerHTML -> ul 태그 자체가 바뀐다!
◆ textContent
-. 요소 안의 내용들 중에서 HTML 태그 부분을 제외한 텍스트만 가져옵니다.(내부의 줄 바꿈, 들여 쓰기 포함)
내부 내용 변경은 innerHTML과 동일하게 내부의 값을 새로운 값으로 변경시키지만 특수 문자도 텍스트로 처리합니다!
<!-- JS -->
const myTag = document.querySelector('#list-1');
console.log(myTag.textContent);
내용 변경하는 것은 innerHTML과 비교하여 아래 코드에 설명드리겠습니다.
<!-- JS -->
const myTag = document.querySelector('#list-1');
myTag.innerHTML = '<ul>list</ul>' // <ul>을 태그로 인식합니다
<!-- JS -->
const myTag = document.querySelector('#list-1');
myTag.textContent = '<ul>list</ul>' //<ul>도 텍스트로 처리해줍니다!
'Web 개발 > JS' 카테고리의 다른 글
| Javascript - 요소 노드 삭제 / 이동 (0) | 2021.06.29 |
|---|---|
| Javascript - 요소 노드 추가 (0) | 2021.06.28 |
| Javascript - DOM (0) | 2021.06.26 |
| Javascript - CSS 선택자 선택 (0) | 2021.06.24 |
| Javascript - array(Quiz) (0) | 2021.06.22 |
댓글