[자바스크립트] 노드의 관리, 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.
📌 참고
반응형
'프로그래밍 > JavaScript' 카테고리의 다른 글
[자바스크립트] Array.from(), 배열로 만들어주기 (0) | 2021.07.10 |
---|---|
[자바스크립트] 날씨 정보 가져오기, Geolocation API (0) | 2021.07.09 |
[자바스크립트] milliSeconds를 시/분/초로 변환하는 법 (2) | 2021.07.07 |
[자바스크립트] Date 객체 (0) | 2021.07.06 |
[자바스크립트] Math 객체 (0) | 2021.07.06 |
댓글
이 글 공유하기
다른 글
-
[자바스크립트] Array.from(), 배열로 만들어주기
[자바스크립트] Array.from(), 배열로 만들어주기
2021.07.10 -
[자바스크립트] 날씨 정보 가져오기, Geolocation API
[자바스크립트] 날씨 정보 가져오기, Geolocation API
2021.07.09 -
[자바스크립트] milliSeconds를 시/분/초로 변환하는 법
[자바스크립트] milliSeconds를 시/분/초로 변환하는 법
2021.07.07 -
[자바스크립트] Date 객체
[자바스크립트] Date 객체
2021.07.06