Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

jQuery로
    목록에 새 항목(li)을 동적으로 추가하는 방법

ul 요소 아래에 새 목록 항목(<li>)을 추가하려면 jQuery의 append() 메서드를 사용하면 됩니다. 이 메서드는 선택한 요소의 끝부분에 새로운 콘텐츠를 삽입하는 역할을 합니다.

1단계: 텍스트 입력 필드 준비하기

먼저 사용자가 값을 입력할 수 있도록 텍스트 타입의 input 필드를 설정합니다.

값: <input type="text" name="task" id="input">

2단계: 버튼 클릭 시 새 목록 항목 추가하기

버튼이 클릭되면 val() 메서드로 입력 필드의 값을 가져오고, append() 메서드를 사용해 해당 값을 새로운 <li> 요소로 만들어 목록 끝에 추가합니다.

$('button').click(function() {
    var mylist = $('#input').val();
    $('#list').append('<li>' + mylist + '</li>');
    return false;
});

return false;는 폼 제출 시 페이지가 새로고침되는 기본 동작을 막아주는 역할을 합니다.

전체 예제 코드

아래 전체 코드를 실행하면 입력창에 값을 넣고 Submit 버튼을 누를 때마다 목록에 새 항목이 추가되는 것을 직접 확인할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('button').click(function() {
                var mylist = $('#input').val();
                $('#list').append('<li>' + mylist + '</li>');
                return false;
            });
        });
    </script>
</head>
<body>
    <form>
        값: <input type="text" name="task" id="input">
        <button>Submit</button>
        <br>

        <p>위에 값을 입력한 후 Submit 버튼을 클릭하면 새 목록 항목이 추가됩니다.</p>
        <ul id="list">
        </ul>
    </form>
</body>
</html>

핵심 정리

val()은 입력 필드의 현재 값을 읽어오는 메서드이고, append()는 선택한 요소 내부의 마지막에 HTML 콘텐츠를 추가하는 메서드입니다. 이 두 가지를 조합하면 사용자 입력을 실시간으로 받아 목록을 동적으로 확장하는 기능을 간단하게 구현할 수 있습니다.