Develop record

[Javascript] createElement, appendChild 본문

Programming Language/Javascript

[Javascript] createElement, appendChild

seong's log 2024. 1. 14. 02:53

createElement

- 지정된 이름의 HTML의 요소를 만들어 반환

- dom 에 추가해주는 작업을 거쳐야 함

 

appendChild

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

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

const p = document.createElement("p") //p 태그 생성
document.body.appendChild(p)  //문서의 body 태그 안에 자식으로 추가
appendChild append
타켓 요소에 자식 요소를 추가
추가한 자식 노드를 반환 반환 데이터가 없음
노드 객체만을 추가 요소에 노드 객체 또는 문자열을 자식 요소로 추가 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>추가</title>
</head>
<body>
    <button id="push">PUSH</button>
    <div id="area"></div>
    <script src="event.js"></script>  
</body>
</html>
const button = document.getElementById("push")
const div = document.getElementById("area")

button.addEventListener('click', function(){
    console.log("div 생성 중")
    const newDiv = document.createElement("div")   //div 요소를 생성 -> 실제 dom에 추가하지 않음

    newDiv.style.backgroundColor = "red" //css : background-color 의 - 는 js에서 빼기 역할
    newDiv.style.width = "200px"
    newDiv.style.height = "200px"

    //div.appendChild(newDiv) //area안에 div를 추가
    console.log(div.appendChild(newDiv))  //div 추가 + 반환 값 출력
    //div.append("하하하")  //append : 문자열 추가 가능
    console.log(div.append("하하하"))  //추가만 할 뿐 반환하지 못함
})

'Programming Language > Javascript' 카테고리의 다른 글

[Javascript] 삼항 연산  (0) 2024.01.14
[Javascript] value, preventDefault  (1) 2024.01.14
[Javascript] addEventListener  (0) 2024.01.14
[Javascript] Event  (0) 2024.01.14
[Javascript]함수  (1) 2024.01.11
'Programming Language/Javascript' Related Articles more