[Javascript] 노드 추가하기

이전 포스트들에서 계속해서 자바스크립트에서 html의 요소에 접근하는 방법들을 다뤘었습니다. 이번에는 자바스크립트 파일에서 요소들을 추가하는 방법을 다뤄볼려고 합니다.

---

1. 노드 생성 - create~ 메소드

노드를 생성하는 create~ 메소드 입니다. 이 메소드는 추가하려는 노드에 따라 create뒤에 붙는 접미사가 달라집니다. 주의해야하는 점은 단순히 노드를 추가하는 기능만 하기 때문에 따로 명시적으로 추가하는 과정을 거쳐야 합니다. 우선 create~메소드들은 다음과 같습니다.

 

create~메소드	메소드가 생성하는 노드
createElement(요소)	요소
createAttribute(속성)	속성
createTextNode(텍스트)	텍스트
createComment(텍스트)	주석

 

이 외에도 create~를 통해 여러 노드들이 존재하며 다음링크에서 자세히 확인할 수 있습니다.

developer.mozilla.org/ko/docs/Web/API/Document/createElement

 

 

 

 

2. 생성된 노드를 트리구조에 추가하기 - appendChild

위에서 언급했듯이 create~는 단순히 노드를 생성하기만 하여 명시적으로 트리구조에 추가해주어야 한다고 했습니다. 그리고 그 동작을 수행하는 메소드가 appendChild()메소드입니다. 이름에서 보이듯이 Child, 즉 자식요소로 추가한다는 의미를 가졌습니다.

 

요소.appendChild(추가할 노드)

지정된 요소의 자식으로 노드를 추가한다는 appendChild 메소드였습니다.

 

appendChild는 무조건 제일 마지막의 자식요소로 추가한다는 점때문에 이를 보완하여 더 앞에 추가할 수 있습니다.

 

 

2-1. insertBefore

요소.insertBefore(추가할 노드, 요소의 자식 노드)

추가할 노드를 두번째 인수로 지정한 자식노드의 앞에 추가합니다. 즉, 형 노드의 형태로 들어올 수 있습니다. 만약 두번 째 인수를 null로 설정하면 맨끝의 자식노드로 추가됩니다. (appendChild()와 같음.)

---