innerHTML, outerHTML, textContent, innerText

JavaScript/DOM

innerHTML, outerHTML, textContent, innerText

yunajoe 2023. 1. 28. 16:18

<!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>    
   </body>
</html>

1. element.innerHTML

- 요소 노드 내부의 HTML 코드를 문자열로 리턴해 줍니다. (내부에 있는 줄 바꿈이나 들여쓰기 모두 포함합니다.)

- 요소 안의 정보를 확인할 수도 있지만, 내부의 HTML 자체를 수정할 때 좀 더 자주 활용됩니다. (내부에 있던 값을 완전히 새로운 값으로 교체하기 때문에 주의해서 사용!)

const myTag = document.querySelector('#list-1'); 
console.log(myTag.innerHTML)

/*   
  <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>    
*/

const myTag = document.querySelector('#list-1');  

// 변경해보기 
myTag.innerHTML = '<li>Exotic</li>'; 
console.log(myTag.innerHTML); 
// <li>Exotic</li>

2. element.outerHTML

- 요소 노드 자체의 전체적인 HTML 코드를 문자열로 리턴해줍니다. (내부에 있는 줄 바꿈이나 들여쓰기 모두 포함합니다.)

- outerHTML은 새로운 값을 할당할 경우 요소 자체가 교체되어 버리기 때문에 주의해야 합니다.

const myTag = document.querySelector('#list-1'); 
console.log(myTag.outerHTML);

/*  
<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>  
*/

const myTag = document.querySelector('#list-1'); 
myTag.outerHTML = '<ul id="new-list"><li>Exotic</li></ul>'

3. element.textContent

- 요소 안의 내용들 중에서 HTML 태그 부분은 제외하고 텍스트만 가져옵니다. (내부에 있는 줄 바꿈이나 들여쓰기 모두 포함합니다.)

- 새로운 값을 할당하면 innerHTML과 마찬가지로 내부의 값을 완전히 새로운 값으로 교체 합니다.

const myTag = document.querySelector('#list-1'); 
 // textContext
console.log(myTag.textContent);



/*
    Ragdoll
    British Shorthair
    Scottish Fold
    Bengal
    Siamese
    Maine Coon
    American Shorthair
    Russian Blue
*/

const myTag = document.querySelector('#list-1');  
myTag.textContent = '<li>new text!</li>';
console.log(myTag.textContent); // <li>new text!</li>