-
innerHTML, outerHTML, textContent, innerTextJavaScript/DOM 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>'JavaScript > DOM' 카테고리의 다른 글
JS로 HTML Style다루기 (0) 2023.01.29 getAttribute(), setAttritube(), removeAttribute() (0) 2023.01.28 <script>태그 위치 (0) 2023.01.11 DOM조작 (0) 2022.11.26 DOM - 노드 (0) 2022.11.26