<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<ul id="list">
<li>커피</li>
<li>홍차</li>
<li>우유</li>
<li>쥬스</li>
<li>녹차</li>
</ul>
<p id="len">list의 element 수</p>
선택한 항목:<input type="text" id="choice">
<br><br>
추가항목:<input type="text" id="col"><br>
<button type="button" id="btn">추가</button>
<script type="text/javascript">
$(function () {
// click한 항목
선택한 값을 text에 넣는 방법1
/* $("ul#list li").click(function() {
// alert('click');
$("#choice").val( $(this).text() );
});
*/
선택한 값을 text에 넣는 방법2
/* $("ul#list").children().click(function() {
// alert('click');
$("#choice").val( $(this).text() );
});
*/
$(document).on("click", "#list li", function() {
//아래서 새로 추가한 li값도 다시 docu로 읽어와 실행
// alert('click');
$("#choice").val( $(this).text() );
});
mouse over
/*
$('ul#list li').mouseover(function() {
$(this).css('background-color', '#00ff00');
});
$('ul#list li').mouseout(function() {
$(this).css('background-color', '#ffffff');
});
*/
//사용자가 버튼을 누르면 새로추가되는 값
$("#btn").click(function () {
let len = $("ul#list").children().length;
$("#len").text(len + "개의 element가 있습니다");
// 추가 항목
let appendObj = $("<li></li>").text( $("#col").val() );
$("#list").append( appendObj );
});
});
</script>
</body>
