DOM 조작 (inner HTML)

• innerHTML 속성은 읽기 뿐만 아니라, 쓰기도 가능한 속성

• HTML 태그를 입력할 수도 있음

• 가장 쓰기 쉬운 속성이지만, 느리고 보안 위협이 있음. (textContent가 안전)

 

HTML

<div id="target">변경 전</div>

JavaScript

let target = document.querySelector('#target');
target.innerHTML = `<span>변경 후</span>`;

let target = document.querySelector('.target');
target.innerHTML = `<span>변경 후</span>`;

// #id , .class

HTML 출력 결과

<div id="target">
 <span>변경 후</span>
</div>