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 요소 추가와 관련된 개념을 잘 이해하셨다면, 다양한 웹 페이지에서 동적인 콘텐츠를 추가하는 방법을 실습해 보세요! 🎨💻
'JavaScript' 카테고리의 다른 글
| Chapter 3-19. 인수와 반환(javascript) (0) | 2025.04.01 |
|---|---|
| Chapter 3-18. 함수 정의하고 호출하기(javascript) (0) | 2025.04.01 |
| Chapter 2-15. 반복문 while(javascript) (0) | 2025.03.31 |
| Chapter 2-11. DOM 메소드 및 속성(javascript) (0) | 2025.03.31 |
| Chapter 2-14. 반복문 for(javascript) (0) | 2025.03.31 |