JS document.getElementbyID().innerHTML

자바스크립트 document.getElementByID().innerHTML  속성에 대해서 알아봅니다.

먼저, document.getElementById("id") 메소드를 사용하면 인자 값인 "id" 를 id 로 가진 HTML 요소에 접근이 가능합니다.

그렇게 접근한 다음 .innerHTML property(값)을 통해서 해당 HTML 요소의 값을 수정하는 것 입니다.

이 방법이 일반적으로 자바스크립트를 사용해서 HTML 의 요소에 접근하는 방법 중 하나 입니다.

예제를 만들어 봅니다.

  <p id="demo">test</p>
  <script>
   document.getElementById("demo").innerHTML="Hello Happy day!";
  </script>

demo 라는 아이디를 가진 p 요소에 접근하여 해당 값을 "Hello Happy day!" 라고 바꾸어 주는 코드 입니다.

참고로, 리스트를 가지는 요소에 접근하여 리스트 값을 얻어 올수도 있습니다.

예제를 봅니다.

  <ul id="fruits">
    <li>수박</li>    
    <li>오렌지</li>
    <li>귤</li>
  </ul>

  <p id="demo">test</p>

  <script>
   // "fruits" id 를 가진 html 요소에 접근한다.
   let html = document.getElementById("fruits");
   // 위 요소의 값을 "demo"요소의 값에 대입한다.
   document.getElementById("demo").innerHTML = html.innerHTML;
  </script>

innerHTML 예제 결과값

결과는 위처럼 복사된 값들이 표시되어 진다.

오늘은 document.getElementById() 메소드 사용방법 및 innerHTML 속성에 대해서 정리 해보았습니다

자바스크립트에서 HTML 요소에 접근하기 위한 여러 방법 중 하나인 document.getElementByID() 였습니다.

감사합니다.