동적으로 목록을 추가하는 HTML 코드를 제공합니다. 이 코드는 초보자도 이해하기 쉽도록 주석이 추가되어 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>동적으로 목록 추가</title>
</head>
<body>
<h1>목록 추가</h1>
<!-- 입력 필드와 버튼 -->
<input type="text" id="item" placeholder="항목 입력">
<button onclick="addItem()">추가</button>
<!-- 목록 표시 영역 -->
<ul id="itemList"></ul>
<script>
// 항목 추가 함수
function addItem() {
var newItem = document.getElementById("item").value;
var itemList = document.getElementById("itemList");
// 새로운 목록 아이템 생성
var li = document.createElement("li");
li.appendChild(document.createTextNode(newItem));
// 목록에 아이템 추가
itemList.appendChild(li);
// 입력 필드 초기화
document.getElementById("item").value = "";
}
</script>
</body>
</html>
