Javascript - 요소의 추가 및 제거 하기 (+ 복사)

서론

Javascript로 요소를 추가하고 제거하는 것은 동적인 웹페이지를 만들기 위한 기본적인 요소중 하나입니다.

본문에서는 이 방법을 알아보도록 합시다.

 

요소를 생성하자 - document.createElement

우선 특정 위치에 새로운 요소를 추가하고 싶다면, 요소를 먼저 만들어주어야 합니다. 

요소를 만들어주기 위해서는 document객체에 createElement 메서드 호출하여 만들 수 있습니다.

const newel = document.createElement('h1');

새로운 Element 객체를 반환하며, 만약 tagName이 존재하지 않는 다면 HTMLUnknownElement객체를 반환합니다.

 

요소의 위치를 정해주자 1 - Node.appendChild()

새로운 요소를 만들어 주었다면, 이 요소를 어떤 위치에 배치할 것인지 지정해 주어야 합니다.

그중 가장 첫 번째 방법이 Node.appendChiled() 메서드로서 선택된 Node의 자식 요소로 배치시키는 방법입니다.

See the Pen Untitled by Gon (@gon-91) on CodePen.

 

 

이 방법은 선택된 부모 요소의 자식 요소로 가장 최 하단에 배치하는  방식입니다.

 

Tips - Node와 Element 객체

Node객체는 DOM을 계층으로 구성하기 위한 객체이며

Element는 Node를 상속받은 객체입니다.

 

요소의 위치를 정해주자 2 - Node.perpend()

자식 요소 중 최 하위로 배치되는 appendChild 와달리 최상단에 위치하게 해주는 방법입니다.

See the Pen Untitled by Gon (@gon-91) on CodePen.

 

 

요소의 위치를 정해주자 3 - Node.insertBefore(추가할 요소, 위치 정보)

위의 2가지 방법으로도 자유롭게 해결할 수 있으나, 측정 요소의 앞에 요소를 삽입하는 방법 또한 제공합니다.

See the Pen Untitled by Gon (@gon-91) on CodePen.

 

요소 제거하기 1 - Element.remove()

간단하게 Element요소에서. romove 메서드를 통해 요소를 제거할 수 있습니다.

See the Pen Untitled by Gon (@gon-91) on CodePen.

 

요소 제거하기  2 - Node.removeChild()

특정 위치에서 요소들을 제거하는 방법을 알아보도록 합시다.

appendChild와 사용방법은 동일합니다.

See the Pen Untitled by Gon (@gon-91) on CodePen.

 

 

Tips - 부모 노드 생략하기

부모 노드를 계속 찾는 것 말고 아래와 같은 방법으로 사용할 수도 있습니다.

const newel = document.querySelectorAll('h1');
newel[2].parentNode.removeChild(newel[2]);

요소 복사하기 - Node.clonNode()

원하는 요소를 복사할 수도 있습니다. 다만 이 방법은 createElement와 유사하기 때문에 경로를 지정해 주어야 합니다.

See the Pen Untitled by Gon (@gon-91) on CodePen.

이때 clonNode의 인자 값은 true 또는 false를 지정해 줄 수 있습니다.

• true : 하위 요소 전부 복사
• false : 해당 요소만 복사