[자바스크립트] 노드의 관리, appendChild(), createElement(), createAttribute() 등

 

노드의 관리

• JS로 노드의 추가, 생성, 등을 알아보자

 

 

노드의 추가

appendChild()

• appendChild() 메소드는 새로운 노드를 해당 노드의 자식 노드 리스트(child node list)의 맨 마지막에 추가한다.

See the Pen appendChild by Wonjun Hwang (@dittoh) on CodePen.

 

 

 

insertBefore()

• insertBefore() 메소드는 새로운 노드를 특정 자식 노드 바로 앞에 추가한다.

기본 문법

부모노드.insertBefore(새로운자식노드, 기준자식노드);

• 새로운 자식 노드 : 자식 노드 리스트(child node list)에 새롭게 추가할 자식 노드를 전달
• 기준 자식 노드 : 새로운 노드를 삽입할 때 기준이 되는 노드로, 이 노드 바로 앞에 새로운 노드가 추가

See the Pen by Wonjun Hwang (@dittoh) on CodePen.

 

 

 

insertData()

• insertData() 메소드는 텍스트 노드의 텍스트 데이터에 새로운 텍스트를 추가한다.

기본 문법

텍스트노드.insertData(오프셋, 새로운데이터);

• 오프셋(offset) : 오프셋 값은 0부터 시작하며, 기존 텍스트 데이터의 몇 번째 위치부터 추가할지를 전달한다.
• 새로운 데이터 : 새로이 삽입할 텍스트 데이터를 전달한다.

See the Pen by Wonjun Hwang (@dittoh) on CodePen.

 

 

 

 

노드의 생성

createElement()

• 새로운 요소 노드를 생성한다.

See the Pen createElement by Wonjun Hwang (@dittoh) on CodePen.

 

 

 

createAttribute()

• 새로운 속성 노드를 만들 수 있다.
• 만약 같은 이름의 속성 노드가 이미 존재하면, 기존의 속성 노드는 새로운 속성 노드로 대체된다.
• 이미 존재하는 요소 노드에 속성 노드를 생성하고자 할 때에는 setAttribute() 메소드를 사용할 수 있다.

 

 

 

createTextNode()

• 텍스트 노드를 생성한다.

See the Pen createTextNode() by Wonjun Hwang (@dittoh) on CodePen.

 

 

 

 

노드의 제거

removeChild()

• 자식 노드 리스트에서 특정 자식 노드를 제거한다.
• 노드가 제거될 때에는 제거되는 노드의 모든 자식 노드들도 다 같이 제거된다.

See the Pen removeChild by Wonjun Hwang (@dittoh) on CodePen.

 

 

 

removeAttribute()

• 속성의 이름을 이용하여 특정 속성 노드를 제거

See the Pen removeAttribute by Wonjun Hwang (@dittoh) on CodePen.

 

 

 

 

📌 참고

• http://tcpschool.com/javascript/js_dom_nodeManage