이번 글에서는 DOM(2)에서 공부한 내용을 바탕으로 직접 새 요소 노드를 만들고 연결하는 것을 해보겠습니다.
↓ DOM(2)를 보지 않았다면 요기로! ↓
JavaScript-DOM(문서 객체 모델) 요소 추가와 노드 삭제/순서배열(2)
createElement() 함수 새 요소를 만드는 함수이다. document.createElement("추가할 요소"); createTextNode() 함수 텍스트 요소를 만드는 함수이다. document.createTextNode("추가할 텍스트"); appendChild() 함수 노드를 연
dodo5517.tistory.com
<p class="hello">안녕하세요.</p>아무것도 없는 html 소스에 이 텍스트 단락을 추가해 보겠습니다.
요소 노드 만들기 - createElement() 함수
<p class="hello">안녕하세요.</p>을 보면 <p>요소를 먼저 만들어야 하는 것을 알 수 있습니다.
이렇게 <p>를 만들어줍니다.
텍스트 요소 만들기 - createTextNode() 함수
<p>를 만들었으니 이번에는 안에 들어갈 "안녕하세요."를 만들어야겠죠?
이렇게 해주면 저희는 <p> 노드와 텍스트 노드를 만들었습니다. 하지만 지금 이 상태를 그림으로 보면
그림을 보면 서로 연결이 되어있지 않습니다.
서로 관계가 전혀 없는 상태죠.
이제 이것들을 연결해 보겠습니다.
자식 노드로 추가하기 - appendChild() 함수
짠 이러면 <p> 요소와 텍스트 요소를 연결해 주었습니다.
그러니까 <p>의 자식이 텍스트가 된 것이죠.
똑같이 body와 p를 연결해 주겠습니다.
속성 노드 만들기 - createAttribute() 함수
<p class="hello">안녕하세요.</p>에서 마지막으로 남은 class="hello"를 만들어보겠습니다.
속성 노드 연결하기 - setAttributeNode() 함수
<p>요소와 class="hello" 속성을 연결하겠습니다.
우왕~ 이제 저희는 <p class="hello">안녕하세요.</p>을 다 만든 겁니다!
elements에 들어가서 확인해 보면 <body> 안에 <p class="hello">안녕하세요.</p>가 있습니다.
도슐랭스타
★★★★☆ : 괜찮구만!
개인적으로 저번 1-실습보다 쉬운 것 같다. (실제로 글 쓰는 시간도 저번보다 매우 짧았습니다^^) 사실 2-실습은 하나가 더 있습니다. 노드 순서를 바꾸고 삭제하는 게 남아있죠!! ㅎㅎ,, 천천히 올려보겠습니다,, 만들고 연결하고 만들고 연결하고 하는 것을 간단하게 할 수 있어서 재미있었던 것 같습니다. 다음 부분도 파이팅!~
'JavaScript' 카테고리의 다른 글
| JavaScript-DOM(문서 객체 모델) 1-실습 (0) | 2023.08.17 |
|---|---|
| JavaScript-DOM(문서 객체 모델) 요소 추가와 노드 삭제/순서배열(2) (0) | 2023.08.12 |
| JavaScript-DOM(문서 객체 모델) 요소에 접근하기(1) (0) | 2023.08.05 |
| JavaScript-Array(배열) 객체 (0) | 2023.07.28 |
| JavaScript-객체(object) (0) | 2023.07.22 |