자바스크립트로 HTML요소 콘텐츠 텍스트 수정하기 (innerHTML 속성)

요소에 접근한 뒤 콘텐츠의 텍스트 를 반환하고 수정하는 속성에는
innerHTML 이 있다.
textContent , innerText 와 다른 점은 콘텐츠에 포함된 태그값도 텍스트와 같이 반환하며,
수정 시 태그도 같이 반영이 된다. 
코드를 보자.

 <p>Hi, Here is innerHTML test.

    <span style="display:none">테스트 입니다.</span>

  </p>

  <script>

    let text = document.getElementsByTagName("p");

    console.log(text);

    console.log(`text is ${text[0].innerHTML}`);

  </script>

document.getElementsByTagName() 으로 HTMLCollection 객체의 첫번째 p 요소에 접근할 수 있다. innerHTML 로 반환한 값을 콘솔로그 로 찍어보면

text is Hi, Here is innerHTML test.  <span style="display:none">테스트 입니다.</span>

위와 같다.
textContent , innerText 와는 다르게 태그도 같이 출력이 된다.

그럼, 하기 코드를 추가한다면,

    text[0].innerHTML = "<strong>innerHTML</strong> test";

브라우저 화면에 나오는 결과는 태그가 적용된 콘텐츠가 출력된다.

innerHTML test

이 역시 textContent , innerText 와는 다른 점이다.
textContent , innerText 은 태그가 그냥 텍스트로 출력이 된다.

태그 및 텍스트를 같이 수정할때는

innerHTML 속성을 사용하면 효율적이다.