Chapter 2-16. createElement & appendChild(javascript)

JavaScript

Chapter 2-16. createElement & appendChild(javascript)

Chansman 2025. 3. 31. 23:41

document.createElement() 메소드는 HTML에서 새로운 요소를 동적으로 생성하는 데 사용됩니다. 이 메소드를 활용하면 JavaScript로 동적으로 HTML 요소를 만들고, 생성된 요소를 웹 페이지에 추가할 수 있습니다. 그러나 createElement() 메소드로 요소를 생성한 후에는, **appendChild()**와 같은 메소드를 사용하여 실제로 웹 페이지에 표시해야 합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" contect="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>creatElemnt & appendchild </title>
    
</head>
<body>
    
    <div id ="container">


    </div>
    
    <script>
        for (let a =1; a<=5; a+=1){
        const div = document.getElementById("container")
        const box = document.createElement("div")
        
        box.style.color = "red" //자바스크립트안에서는 컬러의 값은 문자열이나 숫자로밖에안된다 css에서는 color : red; 이렇게가능
        box.style.width = "200px"
        box.style.height = "200px"
        box.textContent = "햇갈리지만 신기하고 재미있다!"

        div.appendChild(box)
        }

    </script>
</body>
</html>

📌 document.createElement() 메소드

**document.createElement()**는 새 HTML 요소를 생성하여 반환하는 메소드입니다.

🔹 기본 사용법

let newElement = document.createElement('div');

이 코드는 div 태그를 새로 생성하고 **newElement**라는 변수에 저장합니다.

🔹 브라우저 화면에 추가하기

생성만 했을 뿐 생성된 요소는 브라우저에 표시되지 않습니다. appendChild() 또는 **append()**를 사용하여 브라우저 화면에 요소를 추가해야 합니다.

✅ 예시

let newElement = document.createElement('p');
newElement.textContent = '이것은 동적으로 생성된 문단입니다.';
document.body.appendChild(newElement);

**createElement()**로 새 <p> 요소를 만들고, textContent 속성으로 내용을 추가한 후, **appendChild()**로 body에 추가합니다.

📋 appendChild() 메소드와 append() 메소드

**appendChild()**는 자식 요소를 추가할 때 사용되는 메소드로, 생성된 요소를 지정한 부모 요소에 자식으로 추가합니다.

parentElement.appendChild(newElement);

예시:
**append()**는 노드 객체뿐만 아니라 문자열도 자식 요소로 추가할 수 있는 메소드입니다. appendChild()와 기능은 비슷하지만 문자열도 추가 가능하다는 점에서 차이가 있습니다.

🔹 차이점

**appendChild()**는 노드 객체만 추가할 수 있습니다.
**append()**는 노드 객체뿐만 아니라 문자열도 자식으로 추가할 수 있습니다.

✅ 예시

// appendChild 사용
parentElement.appendChild(newElement);

// append 사용 (문자열 포함 가능)
parentElement.append('This is a new paragraph.');

🚩 결론

document.createElement() 메소드는 HTML 요소를 동적으로 생성하는 데 사용됩니다.
**appendChild()**는 요소를 부모 요소에 추가하는 데 사용되고, **append()**는 문자열도 추가할 수 있습니다.
이 방법들을 사용하여 동적으로 웹 페이지에 콘텐츠를 추가하고, 동적인 사용자 인터페이스를 구축할 수 있습니다.

이제 동적 HTML 요소 추가와 관련된 개념을 잘 이해하셨다면, 다양한 웹 페이지에서 동적인 콘텐츠를 추가하는 방법을 실습해 보세요! 🎨💻