노트 추가 기능
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = "container">
<h1> Web Programming</h1>
<p> 공부할 주제를 기록해 보세요</p>
<form action="">
<input type="text" id="subject" autofocus>
<button onclick="newRegister();return false;"> 추가</button>
</form>
<hr>
<ul id="itemlist"></ul>
</div>
<script>
function newRegister(){
let newItem1 = document.createElement("li"); //요소노드 추가
let subject = document.getElementById("subject");//폼 추가요소 필드
let newText = document.createTextNode(subject.value);//텍스트 노드만들기
newItem1.appendChild(newText);
let ItemList = document.querySelector("#itemlist");
ItemList.appendChild(newItem1);
subject.value=""; //폼 요소 초기화
}
</script>
</body>
</html>
코드의 전체적인 흐름
위 코드는 웹 페이지에서 사용자가 입력한 내용을 리스트에 추가하는 기능을 구현합니다. 즉, 사용자가 입력한 내용을 새로운 리스트 항목으로 만들어 기존 리스트에 추가하는 것입니다.
코드별 상세 설명
- function newRegister():
- 새로운 노트를 추가하는 기능을 담당하는 함수입니다.
- let newItem1 = document.createElement("li");:
- 새로운 리스트 항목(<li>)을 생성하여 newItem1 변수에 저장합니다. 이는 리스트에 추가될 새로운 노트를 나타냅니다.
- let subject = document.getElementById("subject");:
- id가 "subject"인 요소(보통은 입력 필드)를 찾아 subject 변수에 저장합니다. 이 요소는 사용자가 노트 내용을 입력하는 곳입니다.
- let newText = document.createTextNode(subject.value);:
- subject 요소에 입력된 값(subject.value)을 텍스트 노드로 만들어 newText 변수에 저장합니다. 이는 실제로 리스트에 표시될 노트 내용입니다.
- newItem1.appendChild(newText);:
- 앞서 생성한 리스트 항목(newItem1)에 텍스트 노드(newText)를 자식으로 추가합니다. 즉, 리스트 항목 안에 입력된 내용이 들어가게 됩니다.
- let ItemList = document.querySelector("#itemlist");:
- id가 "itemlist"인 요소(보통은 <ul>이나 <ol>)를 찾아 ItemList 변수에 저장합니다. 이 요소는 전체 리스트를 나타냅니다.
- ItemList.appendChild(newItem1);:
- 전체 리스트(ItemList)에 새로운 리스트 항목(newItem1)을 자식으로 추가합니다. 즉, 새로 생성된 노트가 리스트의 마지막에 추가됩니다.
- subject.value="";:
- subject 요소의 값을 빈 문자열로 초기화하여 다음 입력을 위해 입력 필드를 비웁니다.
노트 추가 방식 요약
- 새로운 리스트 항목 생성
- 입력된 내용을 텍스트 노드로 변환
- 리스트 항목에 텍스트 노드 추가
- 전체 리스트에 새로운 리스트 항목 추가
- 입력 필드 초기화
'JavaScript' 카테고리의 다른 글
| Flexbox 레이아웃을 사용하여 요소를 가운데 정렬하는 방법 (0) | 2024.12.09 |
|---|---|
| 팝업창과 모달창 (0) | 2024.12.02 |
| 자바스크립트 함수 표현식 (2) | 2024.11.22 |
| 자바스크립트 함수 (1) | 2024.11.22 |
| 자바스크립트 for 문 (0) | 2024.11.22 |
