JavaScript 12. innerHTML, outer HTML, textContent

element.innerHTML

HTML 요소 내부의 문자열을 리턴 (줄 바꿈, 띄어쓰기 모두 포함)
또는 새로운 값을 할당한다. (기존 값은 지워지고 새로운 값이 출력된다.)

<p id="name">이유라</p>

<script>
    const name = document.querySelector('#name');
    console.log(name.innerHTML);
    //'이유라'를 리턴하여 콘솔창에 출력 
    
    document.getElementById('name').innerHTML="정은지";
    //기존 값을 지우고 '정은지' 새로 출력 
</script>

element.outerHTML

태그를 포함한 요소 자체의 전체적인 HTML 코드를 문자열로 리턴
새로운 값을 할당할 경우 요소 자체가 교체되어 버리니 주의하자

<p id="name">이유라</p>

<script>
    const name = document.querySelector('#name')
    console.log(name.outerHTML);

    //태그자체 교체 
    name.outerHTML = '<ul id="new"><li>hi</li></ul>';
</script>

element.textContent

요소 안의 내용 중 HTML 태그를 제외한 텍스트를 리턴 (줄바꿈, 띄어쓰기 포함)
특수문자 또한 텍스트로 처리한다.

<p id="name">이유라</p>
<script>
    const name = document.querySelector('#name')
    console.log(name.textContent);
    //이유라 출력 
    
    console.log(name.textContent);
    name.textContent = '<li>new text!</li>';
    //<li>new text!</li> 특수문자도 그대로 출력 
</script>