오답노트
20230425 전송 받은 메세지 목록 만들기
titlejjk
2023. 4. 25. 15:15
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step07_CreateElement3.html</title>
</head>
<body>
<input type="text" id="inputMsg" placeholder="메세지 입력...">
<button id="sendBtn">전송</button>
<h3>전송 받은 메세지 목록</h3>
<ul id="msgList">
<li>하나</li>
<li>두울</li>
</ul>
<script>
//id 가 sendBtn 인 곳에 "click"이벤트가 일어 났을때 실행할 callback
//함수 등록
document.querySelector("#sendBtn").addEventListener("click", (e)=>{
//1. input 요소에 입력한 value값을 읽어온다.
let msg = document.querySelector("#inputMsg").value;
//2. li 요소를 만든다
let li = document.createElement("li");
//3. 만든 li요소에 innerText로 input요소에서 읽어온 value 값을 넣어준다.
li.innerText=msg;
//4. 위에서 만든 li요소를 id가 msgList 인 곳에 추가한다(append한다)
document.querySelector("#msgList").append(li);
});
</script>
</body>
</html>