[jQuery]input 입력 값 받아서 리스트로 등록

input 텍스트에 입력 하고 "추가"버튼 클릭 시 member 태그 안에 리스트 생성해서 제일 마지막에 추가

 

html

<div>
    <input type="text" id="memberName" />
    <button id="add">
        추가
    </button>
</div>
<ul class="member">
</ul>

 

js

$(document).ready(function() {
    $("#add").click(function(){
        memberName = $("#memberName").val(); //입력값 memberName 변수에 저장
        $(".member").append(`<li>${memberName}</li>`) //append 메서드로 .member 마지막에 추가
    })
});

 

위에 같이 작성해도 동작은 하지만 ready메서드에 직접 작성하지 않고 효율성을 위해 기능별로

함수를 활용해 정리 해주면 아래와 같이 작성할 수 있다.

js

var $member=null;
var $memberName=null;
$(document).ready(function(){
    init();
    initEvent();
})

function init(){
    $member=$(".member");
    $memberName=$("#memberName");
}

function initEvent(){
    $("#add").click(function(){
        add();
    })
}

function add(){
    memberName = $memberName.val();
    $member.append(`<li>${memberName}</li>`);
}