DOM Node, Element 활용

안녕하세요!
저번 글에서는 Dom Node와 Element 기초에 대해 알아보았는데요
이번에는 활용하는 방법을 알아보겠습니다.

 

* createElement()

원하는 태그를 생성합니다.

var child = document.createElement('div');

 

* appendChild()
자식 노드 리스트 중 마지막 자식으로 삽입시켜줍니다.

var parent = document.querySelector(".parent");
var child = document.createElement('div');
parent.appendChild( child );

 

* remove()

엘리먼트를 삭제합니다.

var parent = document.querySelector(".parent");
parent.remove();

 

* removeChild()

노드를 삭제합니다.

parentNode.removeChild(deleteNode)

 

* insertBefore()

노드를 특정 노드 앞으로 옮겨줍니다.

parentNode.insertBefore(newNode, referenceNode)
-> 부모노드.insertBefore(옮길노드, 기준노드)

 

* replaceChild()

노드를 교체합니다.

parentNode.replaceChild(newNode, oldNode)
-> 부모노드.replaceChild(새로운노드, 교체될노드)

 

예시 중 parentNode들은 반드시 자식 요소가 아닌 부모 노드에서 활용해야 합니다!

 

위에서 소개해 드린 내용들로 테이블 드래그&드롭 등과 같은 여러 인터랙션들을 제작할 수 있습니다.