동적으로 생성되는 캘린더를 만들면서 노드를 추가할 때 어떤 방법을 사용하는 것이 가장 괜찮을지 고민하다가 append와 appendChild의 차이를 정확하게 알고싶어졌다.
append와 appendChild는 모두 부모 노드에 자식 노드를 추가하는 메서드이다. 같은 기능을 하는 것 같은데 어떤 상황에 어떤 메서드를 쓰는 게 좋을까? 두 메서드는 어떤 차이가 있는지 알아보았다.
📌 appendChild
Node.appendChild()
appendChild(aChild)- 노드 객체(Node object)만 받을 수 있다.
- 한 번에 하나의 노드만 추가할 수 있다.
- 새롭게 추가된 노드 객체를 반환한다.
Example
const $p = document.createElement("p");
document.body.appendChild($p);appendChild를 체이닝하면 중첩된 DOM 구조를 만들 수 있다.
이는 appendChild가 새로 추가된 노드 객체를 반환하기 때문에 가능한 것이다.
const $div = document.body
.appendChild(document.createElement("div"))
.appendChild(document.createElement("div"))
.appendChild(document.createElement("div"));
$div.textContent = "text";위 예제는 (body) -> (p, p, p) 형태로 부모 노드인 body에 자식 노드인 p 세 개가 형제 관계로 추가되는 것처럼 보일 수 있지만, 결과는 (body) -> (p) -> (p) -> (p) 형태로 중첩 구조로 추가된다.
$p에 할당되는 값은 가장 마지막으로 추가된 <p> 요소다. 따라서 가장 안쪽의 p 요소의 textContent가 "paragraph"가 되고, 아래와 같은 구조가 만들어지는 것이다.
<body>
<div>
<div>
<div>text</p>
</div>
</div>
</body>appendChild를 사용하여 DOM에 이미 존재하는 노드를 다른 위치로 이동시킬 수도 있다.
DOM에 이미 존재하는 노드를 appendChild로 DOM에 다시 추가하면 현재 위치에서 노드를 제거하고 새로운 위치에 노드를 추가한다.
<div id="btnContainer">
<button>yesterday</button>
<button>tomorrow</button>
<button>today</button>
</div>const $btnContainer = document.getElementById("btnContainer");
const $btnContainer = document.getElementById("btnContainer");
// 이미 존재하는 요소 노드 취득
const [$btnPrev, $btnNext, ] = $btnContainer.children;
// 이미 존재하는 $btnNext 요소 노드를 #btnContainer 요소 노드의 마지막 노드로 이동
$btnContainer.appendChild($btnNext); // yesterday - today - tomorrow📌 append
Element.append()
append(param1)
append(param1, param2)
append(param1, param2, /* … ,*/ paramN)- 노드 객체(Node object), 문자열 객체(string object)를 받을 수 있다.
- 한 번에 여러 개의 노드와 문자열을 추가할 수 있다.
- 나머지 파라미터도 사용 가능
- 반환 데이터가 없다. ⇒ undefined 반환
Example
const $div = document.createElement("div")
const $p = document.createElement("p")
$div.append("Hi", $p)
console.log($div.childNodes) // NodeList(2) [ text, p ]append도 마찬가지로 DOM에 이미 존재하는 노드를 다른 위치로 이동시킬 수 있다. 이런 경우 나머지 파라미터가 유용하게 쓰이겠다.
const $beers = document.querySelectorAll(".beer");
document.getElementById("drink-list").append(...$beers);예제를 실행하면 beer 클래스를 가진 노드들을 아이디가 drink-list인 요소의 마지막 자식 위치로 이동시켜준다.
✏️ 정리
| appendChild | append | |
|---|---|---|
| 전달 가능한 객체 | 노드 | 노드, 문자열 |
| 추가 가능 개수 | n | 1 |
| 반환값 | 추가된 노드 객체 | X |
javascript.info에 따르면 appendChild는 구식 메서드라 잘 사용하지 않고,
append를 사용하는 것이 더 유연하기 때문에 append 사용을 권장한다고 한다.
참고 자료
MDN Element.append(), Node.appendChild()
javascript.info 문서 수정하기
이웅모, 『모던 자바스크립트 Deep Dive』, 위키북스
https://webruden.tistory.com/634
https://blogpack.tistory.com/682
