HTML DOM Element insertAdjacentElement() 메서드

정의와 사용법

insertAdjacentElement() 요소를 지정된 위치에 삽입하는 메서드.

허용된 위치:

값 설명
afterbegin 요소의 시작 뒤에(첫 번째 자식 요소).
afterend 요소 뒤에.
beforebegin 요소 앞에.
beforeend 요소의 끝 전에(마지막 자식 요소).

예제

예제 1

span 요소를 제목 뒤에 삽입하려면:

const span = document.getElementById("mySpan");
const h2 = document.getElementById("myH2");
h2.insertAdjacentElement("afterend", span);

직접 시도해 보세요

예제 2

"afterbegin" 사용하기:

const span = document.getElementById("mySpan");
const h2 = document.getElementById("myH2");
h2.insertAdjacentElement("afterbegin", span);

직접 시도해 보세요

예제 3

"beforebegin" 사용하기:

const span = document.getElementById("mySpan");
const h2 = document.getElementById("myH2");
h2.insertAdjacentElement("beforebegin", span);

직접 시도해 보세요

예제 4

"beforeend" 사용하기:

const span = document.getElementById("mySpan");
const h2 = document.getElementById("myH2");
h2.insertAdjacentElement("beforeend", span);

직접 시도해 보세요

문법

element.insertAdjacentElement(position, element)

또는

node.insertAdjacentElement(position, element)

매개변수

매개변수 설명
position

필수입니다. 요소에 대한 위치:

  • afterbegin
  • afterend
  • beforebegin
  • beforeend
element 삽입할 요소.

브라우저 지원

모든 브라우저가 지원합니다. element.insertAdjacentElement()：

크롬 IE 에지 파이어폭스 사파리 오페라
크롬 IE 에지 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원 지원