20240520 24일차
💻오늘 하루 요약!
새로운 개인 과제 발제
수준별 학습반 수업
innerHTML( text ) 와 insertAdjacentHTML( position, text )
innerHTML
innerHTML은 특정 요소의 HTML 콘텐츠를 가져오거나 설정하는 데 사용할 수 있다. 이 메서드를 사용하면 요소 내부의 모든 기존 내용을 새로운 HTML로 대체할 수 있다.
간단하고 직관적이다.
장점
- 간단하고 직관적
- 요소 내부의 모든 콘텐츠를 교체할 때 유용합니다.
단점
- 기존 콘텐츠가 모두 제거되고 새 콘텐츠로 대체
- 새로운 콘텐츠를 설정할 때, 요소 내부의 모든 이벤트 리스너가 제거된다.
- innerHTML을 사용할 때, 브라우저는 기존 콘텐츠를 파싱하고 다시 렌더링해야 하므로 성능에 영향을 미칠 수 있다.
insertAdjacentHTML
insertAdjacentHTML은 특정 요소의 특정 위치에 HTML 문자열을 구문 분석하고 DOM 트리에 요소를 삽입한다. 이는 기존 콘텐츠를 유지하면서 새로운 콘텐츠를 삽입할 수 있게 한다.
장점
- 기존 콘텐츠를 유지하면서 새로운 콘텐츠를 삽입할 수 있다.
- 더 세밀한 제어가 가능하여 원하는 위치에 콘텐츠를 삽입할 수 있다.
- 새로운 콘텐츠를 삽입해도 기존의 이벤트 리스너는 유지된다
단점
- 사용법이 innerHTML보다 조금 더 복잡할 수 있다.
요약
innerHTML은 간단한 사용
insertAdjacentHTML은 요소의 특정 위치에 새로운 콘텐츠를 삽입하는 데에 사용, 더욱 더 세밀한 제어
Develop myself