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

`Element.insertAdjacentText()` 사용법

insertAdjacentText() 함수는
지정된 요소의 인접한(Adjacent) 특정 위치에 텍스트를 삽입(insert)합니다.

즉, 요소의 인접한 위치

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

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

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

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

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

JavaScript

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

// 요소 바로 앞 새로운 텍스트 삽입
ele.insertAdjacentText("beforebegin", "Before begin");

// 요소 안쪽 시작 부분에 텍스트 삽입
ele.insertAdjacentText("afterbegin", "After begin");

// 요소 안쪽 끝 부분에 텍스트 삽입
ele.insertAdjacentText("beforeend", "Before end");

// 요소의 뒤에 새로운 텍스트 삽입
ele.insertAdjacentText("afterend", "After end");

구문

insertAdjacentText() 함수는 지정된 요소(element)의 인접한 위치에(where) 전달받은 문자열(data)을 텍스트 노드로 삽입합니다.

이 함수는 텍스트를 삽입하는 목적으로 사용됩니다.
이때 삽입하는 텍스트에 HTML 태그가 포함되어 있으면 자동으로 이스케이프 처리되어 사람이 볼 수 있는 텍스트로 변환됩니다. 관련 예제를 참고하세요!

HTML 태그를 이스케이프 처리한다는 것은 예를 들어, < 기호는 HTML의 시작 태그로 인식되기 때문에, <라는 기호만을 그대로 기재하면 브라우저에서의 표시에 문제가 생기거나 표시되지 않거나 합니다. 이것을 이스케이프 처리하면 HTML의 특수 문자로 해당하는 기호로 변환해서 사람이 볼 수 있게 한다는 것을 의미합니다.
HTML 특수 문자 사용법과 의의 – 예약된 문자와의 충돌을 피하며 웹 콘텐츠 작성하기를 참고하세요!

매개변수

insertAdjacentText() 함수의 매개변수
`where`	지정된 요소의 인접한 위치를 나타내는 문자열입니다. 다음 문자열 중에서 하나이여야 합니다. `"beforebegin"`: 요소 바로 앞(부모 요소를 가지고 있을 때만 유효함) `"afterbegin"`: 요소 안쪽 시작 부분 `"beforeend"`: 요소 안쪽 끝 부분 `"afterend"`: 요소 바로 뒤(부모 요소를 가지고 있을 때만 유효함)
`data`	텍스트 노드로 삽입될 문자열입니다 .

반환 값

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

예외

where을 인식할 수 없는 값일 경우 DOMException 에러를 던집니다.

`insertAdjacentText()`와 `insertAdjacentHTML()` 차이

insertAdjacentText()와 insertAdjacentHTML()은 언뜻 비슷해 보이지만 중요한 차이점이 있습니다.

`insertAdjacentText()`

텍스트를 삽입하는 데 사용됩니다.
삽입되는 텍스트에 HTML(혹은 XML) 태그가 포함되어 있을 경우, 자동으로 이스케이프 처리되어 실제 HTML 요소로 해석되지 않고, 사용자에게 보여지는 텍스트로 변환됩니다.

`insertAdjacentHTML()`

HTML(혹은 XML) 코드를 삽입하는 데 사용됩니다.
삽입되는 내용이 HTML(혹은 XML) 태그일 경우, 해당 태그가 실제로 해석되어 DOM에 요소로 추가됩니다.
따라서, HTML(혹은 XML) 구조를 변경하거나 새로운 요소를 생성할 수 있습니다.

이 두 함수는 사용 목적이 다르기 때문에, 상황에 맞게 적절한 함수를 선택하여 사용하는 것이 중요합니다. 예를 들어, 단순한 텍스트 삽입에는 insertAdjacentText()를 사용하고, HTML(혹은 XML) 구조를 변경해야 할 때는 insertAdjacentHTML()을 사용합니다.

예제

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

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

JavaScript

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

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

다음은 insertAdjacentText() 함수로 삽입하는 텍스트에 HTML 태그가 포함되어 있으면 자동으로 이스케이프 처리되어 사람이 볼 수 있는 텍스트로 변환하는 예제입니다.

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

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

JavaScript

const targetElement = document.getElementById("ele");
const insBtn = document.getElementById("ins-btn");

insBtn.addEventListener("click", () => {
    targetElement.insertAdjacentText("beforebegin", "<p>beforebegin 삽입</p>");
    targetElement.insertAdjacentText("afterbegin", "<p>afterbegin 삽입</p>");
    targetElement.insertAdjacentText("beforeend", "<p>beforeend 삽입</p>");
    targetElement.insertAdjacentText("afterend", "<p>afterend 삽입</p>");
});