자바스크립트 insertAdjacentHTML() 함수 – 올바른 이해와 사용 방법

`Element.insertAdjacentHTML()` 사용법

insertAdjacentHTML() 함수는
지정된 요소의 인접한(Adjacent) 특정 위치에 HTML을 삽입(insert)합니다.

즉, 요소의 인접한 위치

"beforebegin" (바로 앞)
"afterbegin" (안쪽 시작 부분)
"beforeend" (안쪽 끝 부분)
"afterend" (바로 뒤)

중 하나의 위치를 선택하여 HTML을 삽입합니다.

요소의 인접한 특정 위치를 시각화하면 다음과 같습니다.

HTML 요소의 인접한 특정 위치은 주석으로 나타냈습니다.

<!-- beforebegin (바로 앞) -->
<div id="my-div">
    <!-- afterbegin (안쪽 시작 부분) -->
    Content
    <!-- beforeend (안쪽 끝 부분)-->
</div>
<!-- afterend (바로 뒤) -->

JavaScript

const ele = document.getElementById("my-div");

// 요소 바로 앞 새로운 HTML 삽입
ele.insertAdjacentHTML("beforebegin", "<p>Before begin</p>");

// 요소 안쪽 시작 부분, 즉 첫 번째 자식으로 삽입
ele.insertAdjacentHTML("afterbegin", "<p>After begin</p>");

// 요소 안쪽 끝 부분, 즉 마지막 자식으로 삽입
ele.insertAdjacentHTML("beforeend", "<p>Before end</p>");

// 요소의 뒤에 새로운 HTML 삽입
ele.insertAdjacentHTML("afterend", "<p>After end</p>");

구문

insertAdjacentHTML() 함수는 지정된 요소(element)의 인접한 위치에(position) 전달받은 문자열(string)을 HTML(혹은 XML)로 파싱하여 DOM 노드를 생성합니다.

매개변수

insertAdjacentHTML() 함수의 매개변수
`position`	지정된 요소의 인접한 위치를 나타내는 무자열입니다. 다음 문자열 중에서 하나이여야 합니다. `"beforebegin"`: 요소 바로 앞(부모 요소를 가지고 있을 때만 유효함) `"afterbegin"`: 요소 안쪽 시작 부분, 즉 첫 번째 자식으로 삽입 `"beforeend"`: 요소 안쪽 끝 부분, 즉 마지막 자식으로 삽입 `"afterend"`: 요소 바로 뒤(부모 요소를 가지고 있을 때만 유효함)
`string`	삽입할 HTML(혹은 XML) 문자열입니다. 이 문자열이 DOM 트리에 파싱되어 요소의 인접한 위치에 추가됩니다.

반환 값

없습니다. 즉, undefined를 반환합니다.

예제

HTML 요소의 인접한 특정 위치은 주석으로 나타냈습니다.

<!-- beforebegin (바로 앞) -->
<div id="container">
    <!-- afterbegin (안쪽 시작 부분) -->
    <span>Content</span>
    <!-- beforeend (안쪽 끝 부분)-->
</div>
<!-- afterend (바로 뒤) -->
<button type="button" id="btn">HTML 삽입하기</button>

JavaScript

const ele = document.getElementById("container");
const btn = document.getElementById("btn");

btn.addEventListener("click", () => {
    ele.insertAdjacentHTML("beforebegin", "<p>beforebegin 삽입</p>");
    ele.insertAdjacentHTML("afterbegin", "<p>afterbegin 삽입</p>");
    ele.insertAdjacentHTML("beforeend", "<p>beforeend 삽입</p>");
    ele.insertAdjacentHTML("afterend", "<p>afterend 삽입</p>");
});

위 예제처럼 insertAdjacentHTML() 함수는 기존의 요소에는 영향을 주지 않고 새로운 콘텐츠만을 HTML(혹은 XML)로 파싱하여 DOM 노드를 생성해서 삽입하기 때문에 HTML 마크업 콘텐츠를 새로 대체하면 기존 콘텐츠를 모두 제거하고 다시 처음부터 새롭게 새로운 콘텐츠를 DOM에 대체하는 innerHTML 속성에 비해서 효율적이고 빠릅니다.

주의할 점

HTML 문자열을 그대로 파싱하여 DOM에 삽입하므로, 사용자 입력을 직접 삽입하는 경우 등 제어할 수 없는 문자열을 설정할 때에는 보안적인 측면을 항상 고려해야 합니다.

위 예제처럼 사용자 입력을 직접 삽입하는 경우에는 insertAdjacentHTML() 함수를 사용하지 마세요. 사용자 입력을 삽입하려면 단순히 원시 텍스트(raw text)를 처리하는 textContent 속성을 사용하거나 별도의 이스케이프 처리 등을 해야 합니다.