[JavaScript]선택한 요소 앞에 새로운 요소 추가하는 방법

선택한 요소 앞에 새로운 요소 추가하는 방법

이번 포스팅은 JavaScript에서 선택한 요소 앞에 새로운 요소를 추가할 수 있는 before() 메서드 사용 방법을 소개합니다.

---

before() 메서드

Element 객체에서 지원하는 before() 메서드를 사용하면 선택한 요소 앞에 새로운 요소를 삽입할 수 있습니다.

Element.before(newElement);

 

id가 "ul-list"인 요소 앞에 <h1> 요소를 추가하는 예제는 아래와 같습니다.

// 순서 1. 특정 요소 선택
const ulElement = document.getElementById("ul-list");

// 순서 2. h1 요소 생성
const h1Element = document.createElement('h1');

// 순서 3. h1 요소의 텍스트 설정
h1Element.innerText = 'new Text';

// 순서 4. 선택한 요소 앞에 h1 요소를 추가
ulElement.before(h1Element);

 

before() 메서드의 매개변수로 단일 요소가 아닌 여러 개의 요소를 전달할 수 있습니다.

Element.before(newElement1, newElement2, ..., newElementN);

 

id가 "ul-list"인 요소 앞에 <h1>부터 <h3>까지 요소를 추가하는 예제는 아래와 같습니다.

const ulElement = document.getElementById("ul-list");

const h1Element = document.createElement('h1');
h1Element.innerText = 'h1 Example';

const h2Element = document.createElement('h2');
h2Element.innerText = 'h2 Example';

const h3Element = document.createElement('h3');
h3Element.innerText = 'h3 Example';

ulElement.before(h1Element, h2Element, h3Element);

before() 메서드는 undefined를 반환하며, 새로운 요소를 추가할 수 없는 경우 HierarchyRequestError 예외가 발생합니다.

---

예제 1. 단일 요소 추가

아래는 간단한 HTML 마크업 문서입니다.

<div id="content">
  <ul id="ul-list">
    <li>li-1</li>
    <li>li-2</li>
  </ul>
</div>

 

아래는 id가 "ul-list"인 HTML 요소 앞에 <h1> 요소를 추가하는 JavaScript 코드입니다.

const ulElement = document.getElementById("ul-list");

const h1Element = document.createElement("h1");
h1Element.innerText = "h1 Example";

ulElement.before(h1Element);

[실행 결과]

---

예제 2. 여러 요소 추가

아래는 before() 메서드를 사용하여 <h1>부터 <h4>까지 요소를 추가하는 JavaScript 코드입니다.

const ulElement = document.getElementById("ul-list");

const hElement = new Array(4);

hElement[0] = document.createElement("h1");
hElement[0].innerText = "h1 Example";

hElement[1] = document.createElement("h2");
hElement[1].innerText = "h2 Example";

hElement[2] = document.createElement("h3");
hElement[2].innerText = "h3 Example";

hElement[3] = document.createElement("h4");
hElement[3].innerText = "h4 Example";

ulElement.before(...hElement);

[실행 결과]

---

예제 3. 특정 요소 이동

DOM에 이미 존재하는 요소를 선택한 요소 앞으로 이동시킬 수 있습니다.

 

아래는 간단한 HTML 마크업 문서입니다.

<div id="content">
  <ul id="ul-list1">
    <li>ul1-li1</li>
  </ul>
  <ul id="ul-list2">
    <li>ul2-li1</li>
  </ul>
</div>

 

아래는 id가 "ul-list2"인 요소를 id가 "ul-list1"인 요소 앞으로 이동시키는 JavaScript 코드입니다.

const ulElement1 = document.getElementById("ul-list1");
const ulElement2 = document.getElementById("ul-list2");

ulElement1.before(ulElement2);

[JavaScript 코드 적용 전]

[JavaScript 코드 적용 후]

---

예제 4. 요소가 아닌 문자열 추가

before() 메서드를 사용하여 HTML 요소가 아닌 문자열을 추가할 수 있습니다.

 

아래는 간단한 HTML 마크업 문서입니다.

<div id="content">
  Hello,
  <ul id="ul-list">
    <li>li-1</li>
    <li>li-2</li>
  </ul>
</div>

 

아래는 id가 "ul-list"인 HTML 요소 앞에 문자열을 추가하는 JavaScript 코드입니다.

const ulElement1 = document.getElementById("ul-list");

ulElement1.before("JavaScript");

[실행 결과]