DOM 조작 (메소드)

• innerHTML을 이용한 생성에 비해 다소 복잡하게 느껴질 수 있음

• 메소드를 이용한 엘리먼트 생성은, 생성과 동시에 이벤트 핸들러 등록이 가능하다는 장점

 

HTML

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

JavaScript

let target = document.querySelector('#target');
let newSpan = document.createElement('SPAN');	// SPAN 엘리먼트 생성
newSpan.innerHTML = '변경 후';
target.appendChild(newSpan);			// target 아래 > newSpan 엘리먼트 추가

HTML 출력 결과

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

 

DOM (메소드) 삭제

HTML

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

JavaScript

let target = document.querySelector('#target');
target.remove();