innerHTML 프로퍼티란?
특정 HTML 요소 내부에 작성된 내용(HTML 요소를 포함)을 가져오거나 기존 HTML에 새로운 HTML 요소를 추가하는 데 사용된다.
HTML 내용 가져오기
특정 HTML 요소 내부에 작성된 내용을 가져오는 방법
<body>
<div id="content">
<h1>category</h1>
<ul>
<li>li-1</li>
<li>li-2</li>
</ul>
</div>
<script>
const content = document.getElementById("content");
console.log(content.innerHTML);
</script>id가 "content"인 HTML 요소에 접근한 뒤, innerHTML 프로퍼티의 값을 콘솔에 출력하는 코드이다.
HTML에 새로운 HTML 요소 추가하기
기존 HTML에 새로운 HTML 요소를 추가하거나 변경하는 방법
<body>
<p id="food">치킨</p>
<script>
var x = document.getElementById("food");
x.innerHTML = "피자";
</script>
</body>id가 "food"인 HTML 요소에 접근한 뒤, innerHTML 프로퍼티의 값을 "피자"로 변경하는 코드이다.
치킨에서 피자로 변경한 것을 확인할 수 있다.
See the Pen Untitled by 챈챈 (@naaoviji-the-animator) on CodePen.