문자열기반으로 DOM 조작하기

• 들어가기 전에 DOM API를 사용해서 node를 생성하고 추가하는 건 복잡한 일입니다. html을 문자열로 처리하면서 dom에 쉽게 추가하는 방법을 알아봅니다.

학습 목표

1. 다양한 DOM(Document Object Model) APIs를 이해합니다.

핵심 개념

• insertBefore
• innerText
• innerHTML
• insertAdjacentHTML

학습하기

1. DOM 조작 API

삭제, 추가, 이동, 교체를 위해서는 아래 API사용법을 잘 익혀두면 좋습니다.

• removeChild()
• appendChild()
• insertBefore()
• cloneNode()
• replaceChild()
• closet() // 상위로 올라가면서 근접 엘리먼트 찾기. delegation에서 꽤 유용한 메서드입니다.

2. HTML 을 문자열로 처리해주는 DOM API

DOM에 문자열단위로 데이터를 추가하는 것은 매우 편리하고 자주 사용하는 방법입니다. 아래 메서드는 잘 기억해두고 모두 실급을 해둘 필요가 있습니다.

• innerText // getter, setter!
• innerHTML // getter, setter!
• insertAdjacentHTML

생각해보기

1. DOM의 특정 영역을 inserAdjacentHTML 메서드를 사용해서 추가해보세요.