[JavaScript] element.(after/before) - 특정 element 앞뒤로 요소 추가 및 이동하기

after(), before() 메서드는 말 그대로 특정 element의 앞뒤로 요소를 추가하거나 이동시켜주는 메서드이다.

 

이전 게시글에서 element.insertAdjacentElement() 메서드에 대해 정리했었는데,

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

 

사실상 기능만을 본다면 같은 효과를 볼 수 있는 메서드이다.

아무래도 after, before 메서드와 insertAdjacentElement 메서드의 차이점은 브라우저 호환성에 있다.

각 메서드 별로 요소의 앞, 뒤로 삽입 또는 이동이 가능하지만, after/before 메서드의 경우 IE에서는 사용이 불가능하다.

 

이 점을 인지하고나서 after와 before 메서드에 대해 알아보자.

 

▷ 구문

targetElement.after(param1, param2, ..., paramN)
targetElement.before(param1, param2, ..., paramN)

param1, ..., paramN: targetElement를 기준으로 넣거나 이동시킬 요소 혹은 문자열

---

▷ 예제 1) after() 사용법

let container = document.createElement("div");
let p = document.createElement("p");
container.appendChild(p); // "<div><p></p></div>"

let span = document.createElement("span");

// 1. 요소 삽입
p.after(span);

console.log(container.outerHTML);
// "<div><p></p><span></span></div>"

// 2. 여러개 파라마터 동시 삽입
p.after(span, "Text");

console.log(container.outerHTML);
// "<div><p></p><span></span>Text</div>"

 

▷ 예제 2) before() 사용법

let container = document.createElement("div");
let p = document.createElement("p");
container.appendChild(p); // "<div><p></p></div>"

let span = document.createElement("span");

// 1. 요소 삽입
p.before(span);

console.log(container.outerHTML);
// "<div><span></span><p></p></div>"

// 2. 여러개 파라마터 동시 삽입
p.before(span, "Text");

console.log(container.outerHTML);
// "<div><span></span>Text<p></p></div>"

---

진짜 메서드명 그대로 앞뒤에 요소를 넣는 거라 그렇게 어려운 메서드는 아니다.

 

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

---

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

Element.after() - Web APIs | MDN

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

Element.before() - Web APIs | MDN