<!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>
'오답노트' 카테고리의 다른 글
| 20230517 JAVA (0) | 2023.05.17 |
|---|---|
| 20230517 JavaScript 오답 (0) | 2023.05.17 |
| 20230511 과제 (0) | 2023.05.11 |
| 20230428 자바 배열의 객체수 (0) | 2023.04.28 |
| 20230421 오라클데이터베이스 오답노트 (0) | 2023.04.21 |
댓글