[Javascript] append / appendChild / createElement

appendChild

DOM 내 개별요소('노드'라고도 함)에 자식 요소를 추가할 때 사용하는 메소드

 

요소 생성

document.createElement('p') <--인자를 문자열로 (Elements 가 아님 주의 **)

 

구문 형태

target.appendChild(자식으로 추가할 요소)

 

const p = document.createElement("p")
document.body.appendChild(p)

 

createElemenet 를 이용해서 p를 생성하고 appendChild를 써서
p 요소를 body태그 안에 추가하겠다.

 

 

const button = document.getElementById("push")
const div = document.getElementById("area")

button.addEventListener('click',function(){   //클릭이벤트 발생될 때마다 함수 실행
   console.log("div 생성 중")
   const newDiv = document.createElement("div") // 생성만 됐을 뿐 dom에는 따로 추가가 되지 않기 때문에
   div.appendChild(newDiv)   // appendChild를 사용하여 dom내에 추가될 수 있도록 해준다
})                           // 여기 div는 위에 const div 임 ㅡㅡ..!!

appendChild를 쓰기 전         /        쓴 후

 

스타일 추가 가능

const button = document.getElementById("push")
const div = document.getElementById("area")

button.addEventListener('click',function(){
    console.log("div 생성 중")
    const newDiv = document.createElement("div") 
    
    newDiv.style.backgroundColor = "red"  // 주의할 점: backgroun-color 사용 ㄴㄴ, 연산자로 인식
    newDiv.style.width = "200px"
    newDiv.style.height = "200px"
    
    div.appendChild(newDiv)
})

 

append vs appendChild

 

1. append는 문자열 추가가 가능하다!

div.appendChild("문자열 추가")

에러 발생!!!

 

div.append("문자열 추가")

정상적으로 출력

 

 

2. appendChild 는 반환이 된다

 

console.log(div.appendChild(newDiv))

반환되어 출력이 이루어졌다!!

 

 

 

console.log(div.append(newDiv))

에러 발생!!

 

 

 

하 강의를 보면 이해는 하겠는데

응용하기도 너무 어렵다 ㅠㅠ 울고만 싶다 ..

 

 

---