강사님의 코드를 읽으며 복습하던 중 궁금증이 생겼다 🤔
- append와 appendChild는 어떻게 다른 걸까?
- 각각의 메서드를 구분해서 적용하는 상황의 기준은 무엇일까?
먼저, 아래는 MDN 문서에서 소개하는
append(), appendChild() 의 정의와 차이점이다.
append()
append() 메서드는 Element의 마지막 자식 뒤에 노드 객체 또는 문자열 객체를 삽입한다.
appendChild()
appendChild() 메서드는 지정된 부모 노드의 자식 목록 끝에 노드를 추가한다.
append(), appendChild() 차이
- append()는 문자열 객체도 추가할 수 있는 반면, appendChild()는 노드 객체만 허용한다.
- append()는 반환값이 없는 반면, appendChild()는 추가된 노드 객체를 반환한다.
- append()는 여러 노드와 문자열을 추가할 수 있는 반면, appendChild()는 하나의 노드만 추가할 수 있다.
그렇다면, append()와 appendChild()는 언제 사용해야 할까?
눈으로 설명을 확인해도 확실한 감이 잡히지 않아 코드를 통해 이해해보기로 했다.
여러 객체를 한 번에 추가하고 싶다면 ▶ append()
<body>
<ul id="myList"></ul>
<script>
const fruits = ['Apple', 'Banana', 'Cherry'];
const list = document.querySelector('#myList');
fruits.forEach((fruit) => {
const li = document.createElement('li');
li.textContent = fruit;
list.append(li);
});
</script>
</body>예제의 목적은 비어있는 <ul> 의 list에 fruits 배열 값을 담는 것이다.
append() 메서드를 사용하면 forEach()로 생성된 여러 개의 li를 한 번에 추가할 수 있다.
추가한 요소를 다른 변수에 할당해야 한다면 ▶ appendChild()
const body = document.querySelector('body');
const h1 = document.createElement('h1');
h1.textContent = 'Hello, world!';
const addedH1 = body.appendChild(h1);
console.log(addedH1); // 출력 값: Hello, world!appendChild()로 console.log(addedH1)를 호출하자
반환된 h1의 textContent값이 출력되는 것을 확인할 수 있다.
그러나 append()를 사용하면 추가한 요소 값이 반환되지 않기 때문에,
다음과 같이 undefined가 출력되는 것을 확인할 수 있다.
const body = document.querySelector('body');
const h1 = document.createElement('h1');
h1.textContent = 'Hello, world!';
const addedH1 = body.append(h1);
console.log(addedH1); // 출력 값: undefined💡 마지막으로,
append()는 IE 11 이하 버전에서 지원하지 않아 이전 버전을 지원해야 할 경우appendChild()를 사용해야 한다고 한다!
