자바스크립트 기초 - part 3 (2024. 5. 12.)

0. 기본정보

#스파르타코딩클럽 #부트캠프 #주말자습

- 학습주제: 자바스크립트 기초 (강의 출처: youtube 입문자를 위한 자바스크립트 기초 by 유노코딩)

- 학습내용: createElement, appendChild, append

- 특별사항: (없음)
- 학습일: 2024. 5. 12.

---

1) createElement 코드 작성 - 브라우저 상 변화 없음

(지난 번 addEventListener 와 createElement 사용)

(변화 없음 - createElement 는 브라우저에 변화를 못 준다는 것을 확인!)

 

2) newDiv를 DOM에 추가 - appendchild ==> 브라우저 변화 있음!

(콘솔에는 잘 나온다. 과연 브라우저에도 잘 나올까?)

(브라우저에 div가 추가됐다!)

- area 안에 div 3개 추가 확인

 

3) newDiv 속성 조작하기 - 자바스크립트 style 조작법

 

4) newDiv를 DOM에 추가 - append 사용! ==> appendChild 와 동일하게 작동됨!

 

5) appendChild vs. append (차이점)

- 문자열: appendChild (불가능), append(가능)

(appendChild는 문자열 추가 안 됨 == error 3개 확인)

(append는 문자열 추가 됨)

- 콘솔(console) 반환값: appendChild(O), append(undefined)

(console.log(~appendChild~)값은 객체)

 

(console.log(~append~) 반환값은 undefined)