[자바스크립트] appendChild와 prepend의 차이점

짱다미 2020. 1. 14. 05:40

Node.appendChild() 메소드는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙입니다. 만약 주어진 노드가 이미 문서에 존재하는 노드를 참조하고 있다면 appendChild() 메소드는 노드를 현재 위치에서 새로운 위치로 이동시킵니다. (문서에 존재하는 노드를 다른 곳으로 붙이기 전에 부모 노드로 부터 지워버릴 필요는 없습니다.)

ParentNode.prepend() 메소드는 Node 객체 또는DOMString 객체를 ParentNode의 첫 자식노드 앞에 삽입한다. DOMString 객체는 Text 노드와 동일하게 삽입된다.

- 출처: https://developer.mozilla.org/ko/docs/Web/API

Web API

웹 코드를 작성한다면 많은 API를 사용할 수 있습니다. 아래 목록은 웹 앱이나 웹 사이트를 만들 때 사용할 수 있는 모든 인터페이스(객체의 유형)입니다.

developer.mozilla.org

주의해서 봐야할 점은, appendChild는 자식 노드 리스트 중 마지막에, prepend는 첫 자식노드 앞에 붙여준다는 점입니다.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>appendChild or prepend</title>
</head>
<body>
    <span class="test-area">여기서 테스트</span>
    <script src="index.js"></script>
</body>
</html>

index.js

const testArea = document.querySelector(".test-area");
const span = document.createElement("span");

function appendTest() {
    span.innerHTML = "append Child를 하면";
    testArea.appendChild(span);
}

function prependTest() {
    span.innerHTML = "prepend를 하면";
    testArea.prepend(span);
}

function init() {
    appendTest();
    // prependTest();
}

init();

먼저 appendTest 함수를 실행하면

prependTest 함수를 실행하면

이런 결과를 얻을 수 있습니다.