[Javascript] DOM 자식요소를 첫번째 요소로 추가하는 방법 (prepend)

자바스크립트로 DOM 요소(엘리먼트) 하위에 자식요소를 추가하기 위해서는 appendChild 함수를 사용하면 된다.

DOM 자식요소를 마지막 요소로 추가하는 방법이다.

다시 말해 appendChild 함수를 사용하면 기존 엘리먼트 하위 가장 마지막 부분(끝 부분)에 새 엘리먼트가 삽입된다.

var pNode = document.createElement(“p”);

pNode.id = “test”;

document.body.appendChild(pNode);

반대로 기존 엘리먼트 하위 시작 부분(처음 부분)에 추가하기 위해서는 prepend 를 사용하면 된다. (ES6 이상의 경우)

var pNode = document.createElement(“p”);

pNode.id = “test”;

document.body.prepend(pNode);

ES6 이상이 아닌 경우(prepend 함수를 지원하지 않을 경우) appendFirst 라는 함수를 HTMLElement 프로토타입에 추가하여 사용하면 된다.

HTMLElement.prototype.appendFirst = function(childNode) {

if (this.firstChild) {

this.insertBefore(childNode, this.firstChild);

} else {

this.appendChild(childNode);

}

};

var pNode = document.createElement(“p”);

pNode.id = “test”;

document.body.appendFirst(pNode);

HTMLElement 프로토타입을 변경하고 싶지 않다면 appendFirst 함수를 따로 만들어서 사용하면 된다.

function appendFirst(node, childNode) {

if (node.firstChild) {

node.insertBefore(childNode, node.firstChild);

} else {

node.appendChild(childNode);

}

};

var pNode = document.createElement(“p”);

pNode.id = “test”;

appendFirst(document.body, pNode);