자바스크립트 - 노드 추가 삭제 appendChild removeChild

자바스크립트에서

부모노드에서 자식 노드를 추가 하고 삭제하는 함수들을 알아보도록 하겠습니다.

 

1. appendChild

부모노드.appendChild(자식노드)

이렇게 사용하게 되면 부모노드의 가장 마지막에 자식 노드가 추가 됩니다.

아래와 같이 사용할 수 있습니다.

const root = document.querySelector('#root');
const button = document.createElement('button');
const text = document.createTextNode('버튼');

button.appendChild(text);
root.appendChild(button);

 

 

2. removeChild

부모노드.removeChild(삭제할노드)

이렇게 사용하면 부모노드에서 삭제할 노드가 삭제가 됩니다.

const button = document.getElementById('btn');
root.removeChild(button);

 

appendChild와 removeChild를 이용하여 노드를 추가하고 삭제할 수 있습니다.