[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