[HTML/Javascript] 자바스크립트로 HTML의 요소에 자식 요소 추가하기

자바스크립트로 HTML 요소에 자식 요소를 추가할 수 있다.

부모요소.appendChild(자식으로 넣을 요소)

버튼을 누르는 등의 이벤트가 발생했을 때, 새로운 요소를 추가함으로써 사용자에게 새로운 정보를 보여줄 수 있을 것 같다.

---

const parent = document.getElementById("parent_element");

const childElement = document.createElement("div");
childElement.innerText = "요소가 새로 추가됐습니다!"
parent.appendChild(childElement);

---

초기 상태

---

<요소 추가 버튼>을 누르면 div에 자식 요소가 새로 추가됨

---

잘 추가가 된 모습이다.

---

<리셋 버튼>을 누르면 초기 상태로 돌아간다.

---

다양한 활용 예시

1. 알림 메시지 표시
   사용자가 버튼을 눌렀을 때 화면에 알림 메시지를 표시하는 기능
2. 새로운 입력 폼 추가
   사용자가 버튼을 눌렀을 때 새로운 입력 포을 추가하는 기능 (활용: 설문조사 폼에서 질문을 추가하는 기능)
3. 동적 목록 추가
   사용자 맞춤 list-up 구현 가능