[Javascript] insertAdjacentElement 함수에 대해 알아보자

insertAdjacentElement()은 Element Node 또는 Text Node안에 원하는 Node를 삽입할 때 유용한 함수이다.

기본적인 구문은 다음과 같다.

 element.insertAdjacentElement(position, text);

position은 아래 있는 단어만 사용이 가능하다.

'beforebegin'

타겟 Element Node 바로 앞에 

'afterbegin'

타겟 Element Node의 첫 번째 Text Node 앞에

'beforeend'

타겟 Element Node의 마지막 Text Node 뒤에

'afterend'

타겟 Element Node 바로 뒤에

위 내용을 다음과 같이 표현한다.

<!-- 'beforebegin' -->
<p> <------------------------ 현재 타겟 element
<!-- 'afterbegin'-->
foo
<!-- 'beforeend' -->
<p>
<!-- 'afterend' -->

예를들어 보자.

<div class="test">
<a href="#"> foo </a>
</div>

var goo = "<p> goo </p>";
var a = document.querySelector(".test");

a.insertAdjacentElement("afterend", goo);

위의 결과를 아래와 같이 표현할 수 있다.

<div class="test">
<a href="#"> foo </a>
</div>
<p> goo </p>

p.s. 잘못된 내용이 있다면 댓글 부탁드립니다.