JS DOM 참조 가이드

insertAdjacentHTML()HTML DOM insertAdjacentHTML() 메서드

이 메서드는 요소 내에 사용되고 있는 요소를 다시 구문 분석하지 않으므로, 요소 내의 기존 요소를 파괴하지 않습니다.

이는 추가적인 시리얼라이제이션 단계를 피하고, 직접적인 것보다 빠르게 합니다.innerHTML작업이 빠르다.

문법:

element.insertAdjacentHTML(position, text)

예제

var　head　=　document.getElementsByTagName("h2")[0];
head.insertAdjacentHTML("afterend", "<span>Hello world</span>

테이블에 수록된 숫자는 insertAdjacentHTML() 메서드를 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다:

메서드
insertAdjacentHTML()	는	48	는	는	8

매개변수	설명
position	요소에 대한 위치. 법적 가치: "afterbegin"-요소 시작 뒤에 (첫 번째 자식으로) "afterend"-요소 뒤에 "beforebegin"-요소 전에 "beforeend"-요소 끝 전에 (마지막 자식 요소로)
text	HTML로 해석할 문자열

사용 "beginbegin" 값:

예제

var　head　=　document.getElementsByTagName("h2")[0];
head.insertAdjacentHTML("afterbegin", "<span style='color:red;'>Hello　world</span>

“beforebegin” 값 사용:

예제

var　head　=　document.getElementsByTagName("h2")[0];
head.insertAdjacentHTML("beforebegin",　"<span　style=&"39;color:red;'>Hello　world</span>

“beforeend” 값 사용:

예제

var　head　=　document.getElementsByTagName("h2")[0];
head.insertAdjacentHTML("beforeend",　"<span　style=&"39;color:red;'>Hello　world</span>