[JavaScript] element.insertAdjacentElement() - 특정 element를 기준으로 노드 삽입하기 및 이동하기 (ft. insertAdjacentHTML, insertAdjacentText)

insertAdjacentElement() 메서드는 특정 element를 기준으로 앞뒤, 자식으로의 처음, 마지막 위치로 노드 삽입 또는 이동을 하게 도와주는 메서드이다.

▷ 구문

targetElement.insertAdjacentElement(position, element)

position: 상대적인 위치를 나타내는 문자열로, 다음 문자열 중 하나만 사용 가능하다.(대소문자 구분을 하지 않는다.)

beforebegin: targetElement의 앞
afterbegin: targetElement 자식 요소의 첫 번째 위치
beforeend: targetElement 자식요소의 마지막 위치
afterend: targetElement의 뒤

element: 특정 elemet를 기준으로 poisiton에 알맞게 넣을 요소를 의미한다.

▷ 예제 1) insertAdjacentElement() 사용법

<!DOCTYPE html>
<html lang="ko">
  <head>
    <script src="./test.js" defer></script>
    <title>mineItRecord</title>
  </head>
  <body>
    <div id="div-0">Here is id div-01</div>
    <div id="div-1">
      <span>Here is class div-03</span>
    </div>
    <div class="div-2">Here is class div-03</div>
  </body>
</html>

const getCreateElement = (tagName, text) => {
  const element = document.createElement(tagName);
  element.textContent = text;
  return element;
};

const beforeBeginElem = getCreateElement("div", "insert beforebigin DIV");
const afterBeginElem = getCreateElement("p", "insert afterbigin P");
const beforeEndElem = getCreateElement("p", "insert beforeend P");
const afterEndElem = getCreateElement("div", "insert afterend DIV");

const targetElement = document.querySelector("#div-1");
targetElement.insertAdjacentElement("beforebegin", beforeBeginElem);
targetElement.insertAdjacentElement("afterbegin", afterBeginElem);
targetElement.insertAdjacentElement("beforeend", beforeEndElem);
targetElement.insertAdjacentElement("afterend", afterEndElem);

▷ 결과

<div id="div-0">Here is id div-01</div>
<div>insert beforebigin DIV</div>
<div id="div-1">
  <p>insert afterbigin P</p>
  <span>Here is class div-03</span>
  <p>insert beforeend P</p>
</div>
<div>insert afterend DIV</div>
<div class="div-2">Here is class div-03</div>

이런식으로 특정 element를 기준으로 요소 삽입을 도와주는 메서드이다.

한눈에 쉽게 익혀보자면 아래와 같은 느낌이라고 생각하면 된다.

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

insertAdjacentElement() 메서드 말고도 insertAdjacentHTML, insertAdjacentText라는 메서드 역시 존재하는데, 사용법은 비슷하니 상황에 맞게 사용하면 될 것 같다.

* 추가적으로 기존에 있는 element를 파라미터로 넣을경우 새롭게 삽입되는게 아니라 원래있던 위치에서 이동된다.

참고: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement

Element.insertAdjacentElement() - Web APIs | MDN

The insertAdjacentElement() method of the Element interface inserts a given element node at a given position relative to the element it is invoked upon.

developer.mozilla.org

참고: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

Element.insertAdjacentHTML() - Web APIs | MDN

The insertAdjacentHTML() method of the Element interface parses the specified text as HTML or XML and inserts the resulting nodes into the DOM tree at a specified position.

developer.mozilla.org

참고: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentText

Element.insertAdjacentText() - Web APIs | MDN

The insertAdjacentText() method of the Element interface, given a relative position and a string, inserts a new text node at the given position relative to the element it is called from.

developer.mozilla.org