WEB
[JQuery] JQuery를 사용해서 동적으로 요소 추가하기
yo~og
2021. 11. 30. 13:36
JQuery를 사용해서 엔터를 누를때마다 li에 추가 되게 만들어봅시다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>jquery를 사용하기 위해 위 코드를 추가해줍니다.
<p>메세지를 입력하고 Enter 를 입력해 보세요</p>
<input id="inputMsg" type="text" placeholder="메세지 입력..."/>
<ul id="msgList">
<li>하나</li>
<li>두울</li>
</ul>텍스트를 입력 할 input박스를 만들어주고 ul안에 li을 만들어줍니다.
<script>
$("#inputMsg").on("keyup", function(e){
//만일 엔터를 쳤다면
if(e.keyCode == 13){
//입력한 value 값을 읽어와서
let msg=$(this).val();
// li 요소를 만들어서 innerText 를 출력하고 원하는 곳에 추가하기
$("<li>").text(msg).appendTo("#msgList");
//입력한 내용 지우기
$(this).val("");
}
});
</script>키를 업할때 작동하는 이벤트 리스너를 만들어줍니다.
e를 파라미터로 받아 키 코드가 13일때(엔터) if 문을 실행시켜줍니다.
input박스이므로 val()으로 텍스트를 읽어옵니다.
$("<li>")로 li를 하나 만들어주고 text(msg)로 텍스트를 만들어줍니다.
appendTo()로 ul의 가장 뒤에 더해줍니다.
추가하기를 적고 엔터를 누르면 추가가 된 모습을 볼 수 있습니다.
전체 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/jquery/Step02_EventListener4.jsp</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<p>메세지를 입력하고 Enter 를 입력해 보세요</p>
<input id="inputMsg" type="text" placeholder="메세지 입력..."/>
<ul id="msgList">
<li>하나</li>
<li>두울</li>
</ul>
<script>
/*
input 요소에 keyup 이벤트가 일어나고 그 키가 만일 Enter 라면
li 요소를 동적으로 만들어서 innerText 로 input 요소에 입력한 문자열을 읽어와서 넣어주고
li 를 id 가 msgList 인 곳에 추가해 보세요.
- hint
$("<li>").text("xxx").appendTo("#msgList");
$( ).on("keyup", function(e){
let code = e.keyCode;
});
*/
$("#inputMsg").on("keyup", function(e){
//만일 엔터를 쳤다면
if(e.keyCode == 13){
//입력한 value 값을 읽어와서
let msg=$(this).val();
// li 요소를 만들어서 innerText 를 출력하고 원하는 곳에 추가하기
$("<li>").text(msg).appendTo("#msgList");
//입력한 내용 지우기
$(this).val("");
}
});
</script>
</body>
</html>