[TIL] 원하는 위치에 노드 삽입하기

현재 프로젝트를 진행하면서 js로만 DOM조작을 하여 마크업을 생성하고 있다. 협업을 하는 과정에서 서로 이 코드 저 코드를 합치다 보니 마크업의 순서가 의도대로 들어가지 않는 경우가 있다. 그렇기 때문에 우리는 원하는 위치에 노드를 삽입하기 위해서 다음과 같은 함수들을 사용하여 삽입 할 수 있다.

appendChild()

부모노드.appendChild() 메소드는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식노드로 붙인다. 만약 주어진 노드가 이미 문서에 존재하는 노드를 참조하고 있다면 appendChild() 메소드는 노드를 현재 위치에서 새로운 위치로 이동시킨다.

parentNode.appendChild(childNode)

insertBefore()

부모노드의 기준 점 노드 앞에 삽입 할 노드를 삽입한다. 이를 사용해서 내가 원하는 위치에 삽입 할 수 있다.

parentNode.insertBefore(삽입 할 노드, 기준 점 노드);

insertAdjacentElement()

insertAdjacentElement() 메서드는 특정 element를 기준으로 앞뒤, 자식으로의 처음, 마지막 위치로 노드 삽입 또는 이동하는 메서드이다.

targetElement.insertAdjacentElement(position, element)

position

• beforebegin: targetElement 앞
• afterbegin: targetElement 자식 요소의 첫 번째 위치
• beforeend: targetElement 자식 요소의 마지막 위치
• afterend: targetElement 뒤