append와 prepend는 동적인 웹 개발에 유용하게 쓰일 수 있다.
append와 prepend를 사용하여 부모 자식관계를 만들고
이를 이용하여 웹의 형태나 정보를 나타낼 수 있다.
append(appendTo)는 새로운 요소를 타깃의 마지막에 추가하고
prepend(prependTo)는 새로운 요소를 타깃의 처음에 추가한다.
쉽게 생각해보면 배열에서의 push와 unshift의 관계라고 생각하면 이해하기 쉽다.
const div = document.createElement('div');
// body.append(div);
// body.prepend(div);<body>
<!-- <div></div> prepend 시에 앞에 추가 -->
<span></span>
<span></span>
<span></span>
<!-- <div></div> append 시에 뒤에 추가 -->
</body>
append vs appendTo를 비교하면 단지 타깃과 요소의 위치가 반대인 경우이다.
prepend vs prependTo의 경우도 마찬가지이다.
body.append(div) === div.appendTo(body)
body.prepend(div) === div.prependTo(body)
'Javascript' 카테고리의 다른 글
| javascript 조건문 -switch (0) | 2021.01.15 |
|---|---|
| javascript Truthy & Falsy (0) | 2020.12.30 |
| javascript 고차함수 (filter, map, reduce) (0) | 2020.12.27 |
| javascript 클로저 (0) | 2020.12.27 |
| javascript 원시, 참조 자료형 (0) | 2020.12.21 |
댓글