DOM을 이용하여 Element를 삽입하는 메소드를 알아보자.

1. appendChild()

---

하나의 노드를 특정 부모 노드의 자식 노드 중 맨 마지막 자식 노드로 삽입하는 메소드로, 개체 집합(Node)만 추가 할 수 있으며, 추가된 Node 개체를 반환값으로 가진다.

작성 구조

parentNode.appendChild(newNode)

• parentNode: 기준이 될 부모 노드
• newNode: 삽입할 노드

예시

입력

<ul class="parent">
  <li>child1</li>
  <li>child2</li>
  <li>child3</li>
</ul>

const parent = document.querySelector(".parent");
const childLi = document.createElement("li");

childLi.innerText = "child4";

parent.appendChild(childLi);

결과

<ul class="parent">
  <li>child1</li>
  <li>child2</li>
  <li>child3</li>
  <li>child4</li>
</ul>

2. append()와 prepend()

---

appendChild()와 달리 여러 노드를 추가할 수 있으며 문자열 개체도 삽입이 가능한 메소드로, 반환값을 가지지 않는다. 또한 문자열 개체를 삽입 할 경우 Text 노드로 삽입된다.

append()

노드의 경우 부모의 맨 뒤 요소로 추가되고, 문자열 개체의 경우 부모의 맨 뒤 text로 추가된다.

작성 구조

Element.append(param1, param2, ...)

예시

입력

<div class="container">
	<h1>Hello</h1>
</div>

const container = document.querySelector(".container");
const text = "!!!";
const p = document.createElement("p");

p.innerText = "world";

container.append(p, text);

결과

<div class="container">
	<h1>Hello</h1>
  	<p>world</p>
  	!!!
</div>

prepend()

---

노드의 경우 부모의 맨 앞 요소로 추가되고, 문자열 개체의 경우 부모의 맨 앞 text로 추가된다.

작성 구조

Element.append(param1, param2, ...)

예시

입력

<div class="container">
	<h1>Hello</h1>
</div>

const container = document.querySelector(".container");
const text = "!!!";
const p = document.createElement("p");

p.innerText = "world";

container.append(p, text);

결과

<div class="container">
  	<p>world</p>
  	!!!
	<h1>Hello</h1>
</div>

3. insertBefore()

---

하나의 노드를 특정 부모 노드의 자식 노드로 삽입하는 메소드로, 개체 집합(Node)만 추가 할 수 있으며, 추가된 Node 개체를 반환값으로 가진다.

작성 구조

const insertNode = parentNode.insertBefore(newNode, referenceNode);

• parentNode: 기준이 될 부모 노드
• newNode: 삽입할 노드
• referentceNode: 삽입할 위치
  • null: 부모 노드의 맨 뒤에 삽입됨
  • childNode: 해당 노드의 앞쪽에 삽입됨

예시

입력

<div class="container">
	<h1 class="child">Hello</h1>
</div>

const container = document.querySelector(".container");
const child = document.querySelector(".child");
const front = document.createElement("p");
const back = document.createElement("p");

front.innerText = "front";
back.innerText = "back";

container.insertBefore(front, child);
container.insertBefore(back, null);

결과

<div class="container">
	<p>front</p>
	<h1 class="child">Hello</h1>
	<p>back</p>
</div>

4. insertAdjacentElement()

---

부모 요소를 기준으로 위치를 지정하여 Element를 삽입할 수 있다.

작성 구조

parentElement.insertAdjacentElement(position, element)

• position: 위치
  • beforebegin: 부모 요소 앞에 삽입
  • afterbegin: 부모 요소의 맨 첫번째 자식으로 삽입
  • beforeend: 부모 요소의 맨 마지막 자식으로 삽입
  • afterend: 부모 요소의 뒤에 삽입
• element: 삽입할 요소

예시

입력

 <div class="container">
	<h1 class="child">Hello</h1>
</div>

const container = document.querySelector(".container");
const beforeBegin = document.createElement("p");
const afterBegin = document.createElement("p");
const beforeEnd = document.createElement("p");
const afterEnd = document.createElement("p");

beforeBegin.innerText = "beforeBegin";
afterBegin.innerText = "afterBegin";
beforeEnd.innerText = "beforeEnd";
afterEnd.innerText = "afterEnd";

container.insertAdjacentElement("beforebegin", beforeBegin);
container.insertAdjacentElement("afterbegin", afterBegin);
container.insertAdjacentElement("beforeend", beforeEnd);
container.insertAdjacentElement("afterend", afterEnd);

결과

<p>beforeBegin</p>
<div class="container">
 	<p>afterBegin</p>
	<h1 class="child">Hello</h1>
	<p>beforeEnd</p>
</div>
<p>afterEnd</p>