개발/Javascript

[Javascript] append vs appendChild 차이점 (초간단)

append와 appendChild 메서드는 모두 부모 노드에 자식 노드를 추가하는 메서드입니다. 하지만 두 메서드에도 몇 가지 차이점이 존재합니다. 이번 포스팅에서는 두 메서드의 차이점에 대해서 쉽고 간략하게 다뤄보도록 하겠습니다. append() ? append 메서드를 활용하면 노드 객체(Node object)나 DOMString(text)를 사용할 수 있습니다. 또한 한번에 여러 개의 자식 요소를 설정할 수 있습니다. Node object 사용 예시 // Node object 삽입 const parent = document.createElement('div'); const child = document.createElement('p'); parent.append(child); // 결과 // 문자..

개발/Javascript

부모 노드 맨 앞에 요소를 삽입하는 방법 (appendChild 말고! prependChild Javascript)

appendChild? 자바스크립트를 사용하다보면 특정 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 배치하고 싶을 때 appendChild 메서드를 굉장히 많이 사용하는데요. 아래 예시와 같은 경우에 appendChild를 사용하곤 한답니다. // html Javascript // javascript const el = document.createElement('li'); el.textContent = 'appendChild'; document.querySelector('.list').appendChild(el); // result Javascript appendChild prependChild? 하지만, 특정 부모 노드의 자식 노드 리스트 중 첫번 째 자식으로 배치하고 싶은 경우도 생..