[JavaScript] Day 18 - DOM조작 메소드

document.createElement

document의 createElement 메소드는 지정된 이름의 HTML 요소를 만들어 반환해 준다.

사용법

document.createElement('div')

 

하지만!

HTML 요소가 만들어지고 또 반환 되었다고 해서, 해당 요소가 곧장 웹 브라우저 화면에 추가되는 것은 아니다.

 

그럴때 사용방법!

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

사용법

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

 

appendChild .vs append

appendChile 메소드와 비슷한 역할을 하는 append 메소드도 있다.

타겟 요소에 자식 요소를 추가한다는 점에서 같으나, 차이점도 존재한다.

차이점

• appendChile의 경우 추가한 자식 노드를 반환하지만, append는 반환 데이터가 없다.
• append를 이용하면 요소에 노드 객체 또는 문자열을 자식 요소로 추가할 수 있지만, appendChild는 노드 객체만을 추가할 수 있다.

오늘의 실습 1

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

button.addEventListener('click', function(){
    console.log("div 생성 중!")
    const newDiv = document.createElement("div")  // div 생성

    newDiv.style.backgroundColor = "red" // 생성된 div 속성 추가
    newDiv.style.width = "200px"
    newDiv.style.height = "200px"

    div.appendChild(newDiv)  // 생성된 div 추가
})

실습의 결과 1 (버튼을 3번 누른 결과)

오늘의 실습 2

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

button.addEventListener('click', function(){
    console.log("div 생성 중!")
    const newDiv = document.createElement("div")  // div 생성

    newDiv.style.backgroundColor = "red" // 생성된 div 속성 추가
    newDiv.style.width = "200px"
    newDiv.style.height = "200px"

    //div.appendChild("하하하")  // 문자열을 추가할 수 없음. 오직 오브젝트만 가능
    div.append("하하하하하")  // append를 사용한 div 추가

    console.log(div.appendChild(newDiv))
    //console.log(div.append(newDiv))  // 반환 값이 undefined임
})

실습의 결과 2