본문 바로가기

JavaScript/Interactive JavaScript

[JavaScript] 노드 삭제와 이동하기

// 노드 삭제와 이동
const today = document.querySelector('#today'); // 요소 노드 선택
const tomorrow = document.querySelector('#tomorrow');

// 노드 삭제하기: Node.remove()
tomorrow.remove();
today.children[2].remove(); // today 노드의 자식요소 중에서 2번 인덱스 삭제

// 노드 이동하기: prepend, append, before, after
today.append(tomorrow.children[1]); // tomorrow 노드의 자식요소 중 1번 인덱스를 today노드로 이동
tomorrow.children[1].after(today.children[1]); // today 노드의 1번 인덱스를 tomorrow 노드의 자식요소 2번인덱스 다음으로 이동
tomorrow.children[2].before(today.children[1]); // today 노드의 1번 인덱스를 tomorrow 노드의 자식요소 2번인덱스 전으로 이동
tomorrow.lastElementChild.before(today.children[1]); // today 노드의 1번 인덱스를 tomorrow 노드의 마지막 자식요소 전으로 이동