자바스크립트 DOM 삽입, 교체 및 제거 – 관련 함수

DOM 요소 추가, 교체 및 제거를 위한 핵심 함수들

자바스크립트로 DOM(Document Object Model, 문서 객체 모델) 요소의 추가, 교체 및 제거를 위한 주요 함수들에 대해 알아보겠습니다.

요소나 텍스트 추가(삽입)

dom 요소나 텍스트를 추가하는 함수들
`appendChild()`	특정 부모에 자식 요소 추가
`insertBefore()`	특정 부모 내에서 지정한 자식 요소 앞에 삽입
`insertAdjacentText()`	지정된 요소의 인접한 특정 위치에 텍스트를 삽입
`insertAdjacentHTML()`	지정된 요소의 인접한 특정 위치에 HTML 코드를 삽입
`insertAdjacentElement()`	지정된 요소의 인접한 위치에 DOM 요소 노드 삽입

요소 교체

dom 요소를 교체하는 함수
`replaceChild()`	지정한 자식 요소를 새로운 자식 요소로 교체

요소 제거

dom 요소를 제거하는 함수들
`removeChild()`	지정한 자식 요소를 제거
`remove()`	자신을 호출한 요소를 DOM에서 제거

브라우저 호환성

DOM 요소 추가 및 삭제를 위한 핵심 함수들의 브라우저 호환성
메서드	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`appendChild()`	1	12	1	1.1
`insertBefore()`	1	12	1	1.1
`insertAdjacentText()`	1	17	48	4
`insertAdjacentHTML()`	1	17	8	4
`insertAdjacentHTML()`	1	17	8	4
`insertAdjacentElement()`	1	17	78	3
`replaceChild()`	1	12	1	1.1
`removeChild()`	1	12	1	1.1
`remove()`	24	12	23	7

같이 보기