javascript 요소(Element)의 이동 추가 삽입 insertBefore()

javascript 요소(Element)의 이동 추가 삽입 insertBefore()

 

javascript의 insertBefore 함수는 특정 노드에 요소를 삽입할때 사용합니다. 

테이블의 열의 순서를 변경할 때 유용하게 사용되죠 

 

구분을 보시죠.

부모노드.insertbefore(삽입할 노드, 삽입할 노드의 다음 노드)

 

예를들어 아래와 같이 하나의 tr 태그에 6개의 td가 있다고 합시다.

 

 

 

이때 컬럼1을 컬럼3 앞에 삽입하고 싶다면,

 

tr.insertBefore(td[0], td[2]);

m가 됩니다. td[0] 은 컬럼1이 될 것이고, 컬럼3의 인텍스가 td[2]이니

td[0]이 td[2]앞에 삽입되게 됩니다. 

 

좀더 자세하게 보도록 하죠.

 

var tableHeaderTr = document.getElementById("tableHeaderTr");
var tds = tableHeaderTr.children;
tableHeaderTr.insertBefore(tds[0], tds[2]);

 

첫번째 행에서 테이블의 tr을 가져옵니다. 

두번째 행에서 tableHeaderTr의 자식요소(td들) 를 가져옵니다. 

그리고 세번째 행에서 첫번째 열을 3번째 열 앞에 삽입하게 되죠.

 

insertBefore 함수는 테이블의 열을 바꿀 때나, 어떠한 노드 앞에 삽입을 해야 할때 주로 사용됩니다.