현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다.
본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.

1. createElement

createElement란?
createElement는 자바스크립트로 새로운 HTML 요소를 동적으로 생성할 때 사용되는 메서드이다.
이 메서드를 사용하면 페이지가 로드된 후에도 새로운 HTML 요소를 추가할 수 있다

1) 사용법

document.createElement(태그명); 

✔ 태그명은 생성할 HTML 요소의 이름을 문자열로 전달한다. 예를 들어, <div>, <p>, <button> 등의 태그명을 사용할 수 있다.
✔ createElement 메서드는 새로운 HTML 요소 객체를 반환하고, 이 요소를 페이지에 추가하려면 appendChild나 insertBefore와 같은 메서드를 사용해야 한다.

2) 예제: 새로운 div 요소 만들기

let newDiv = document.createElement("div");  // 새로운 <div> 요소 생성
newDiv.innerText = "새로운 div가 생성되었습니다!";  // 생성된 div에 텍스트 추가

document.body.appendChild(newDiv);  // body에 새 div 요소 추가

✔ 이 코드는 body에 새로운 <div> 요소를 추가하며, 해당 <div>의 내용은 "새로운 div가 생성되었습니다!"로 설정된다.

3) createElement와 appendChild 함께 사용하기

createElement는 새로운 요소를 만들고, appendChild는 그 요소를 실제 DOM에 추가하는 역할을 한다.
이 두 가지 메서드를 함께 사용해서 동적으로 HTML 콘텐츠를 변경할 수 있다.

✔ 예제: 새로운 버튼 추가하기

let newButton = document.createElement("button");  // 새로운 <button> 요소 생성
newButton.innerText = "클릭하세요";  // 버튼에 텍스트 추가

// 버튼 클릭 이벤트 추가
newButton.addEventListener("click", function() {
    alert("버튼이 클릭되었습니다!");
});

document.body.appendChild(newButton);  // body에 버튼 추가

✔ 이 코드는 body에 "클릭하세요"라는 텍스트를 가진 버튼을 추가하고, 버튼을 클릭하면 "버튼이 클릭되었습니다!"라는 알림을 띄운다.

4) createElement를 사용하여 스타일 적용하기

let newDiv = document.createElement("div");
newDiv.innerText = "이 div는 스타일이 적용되었습니다!";
newDiv.style.color = "blue";  // 텍스트 색상을 파란색으로
newDiv.style.backgroundColor = "yellow";  // 배경색을 노란색으로
newDiv.style.padding = "10px";  // 내부 여백 설정
document.body.appendChild(newDiv);

✔ 이 코드는 새로운 div 요소를 만들고, 그 요소에 파란색 텍스트, 노란색 배경, 10px의 여백을 적용한다.

2. appendChild와 append

1) appendChild

appendChild는 단일 노드를 부모 노드에 추가하는 메서드로, 한 번에 하나의 자식 요소만 추가할 수 있다.

특징

• 한 번에 하나의 자식 노드만 추가할 수 있다.

• 텍스트 노드도 자식으로 추가 가능하다.

• 반환 값은 추가된 자식 요소이다.

• 기존 자식 요소가 있으면 교체되지 않고, 뒤에 추가된다.

예제

let newDiv = document.createElement("div");
newDiv.innerText = "새로운 div 추가";
document.body.appendChild(newDiv);  // body에 div 추가

appendChild는 추가된 div 요소를 반환한다.

2) append

append는 여러 자식 노드를 한 번에 추가할 수 있는 메서드로, 문자열(HTML 코드)도 자식 요소로 추가할 수 있다.

특징

• 여러 개의 자식 노드를 한 번에 추가할 수 있다.

• 텍스트 또는 HTML 문자열도 추가할 수 있다.

• 반환 값은 undefined이다.

• null이나 undefined는 무시된다.

• 기존 자식 요소가 있으면 뒤에 추가된다.

예제

let newDiv = document.createElement("div");
newDiv.innerText = "새로운 div 추가";
document.body.append(newDiv, " 추가된 텍스트", "<span>HTML 문자열 추가</span>");

append는 div 요소 외에도 텍스트와 HTML 문자열을 함께 추가할 수 있다.
append는 여러 항목을 동시에 추가할 수 있는 장점이 있다.

3) appendChild와 append 비교

appendChild와 append는 모두 DOM에서 자식 요소를 부모 요소에 추가하는 메서드지만, 몇 가지 차이점이 있다.

3. 몬스터 잡기 게임(실습)

몬스터에게 데미지를 입혀서 잡는 게임이다.

끝맺음.

욕심이 생긴다... 몬스터잡기 게임..이쁘게 만들고 싶다..ㅠㅠ