[JavaScript] append() vs appendChild() 차이

DOM 요소를 추가할 때 자주 사용하는 메서드 append()와 appendChild() 
두 메서드는 비슷해 보이지만, 추가할 수 있는 값의 종류에서 가장 큰 차이가 있다.

---

 

append() — 요소 + 문자열 모두 추가 가능

append()는 HTML 요소(Element) 뿐만 아니라 문자열(String) 도 추가할 수 있다.
즉, 텍스트와 태그를 섞어서 넣을 수 있다는 점이 가장 큰 특징이다.

 

li.append("텍스트 추가 가능"); // ⭕️
li.append(spanElement); // ⭕️
li.append("문자", spanElement, "🙂"); // ⭕️ 여러 개도 가능

 

 

---

 

 

appendChild() — 요소만 추가 가능

appendChild()는 오직 요소(Element) 만 추가할 수 있다.
문자열을 넣으면 오류(TypeError) 발생!

 

li.appendChild(spanElement); // ⭕️
li.appendChild("텍스트"); // ❌ TypeError (문자열 불가)

 

 

비교 

메서드	가능한 추가 값	문자열 추가	여러 개 추가	반환값
append()	요소 + 문자열	O	O	없음
appendChild()	요소만	X	X	추가한 요소 반환