JQuery ul li 추가 - jQuery ul li chuga

Question

안녕하세요? 원주남자입니다.

오늘은 네비게이션이나 메뉴, 리스트상에서 많이 사용하는 li태그를 동적으로 추가하고 삭제해보겠습니다.

<!doctype html>
<html lang="en">
 <head>
 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
 <style>
	
 </style>
  <meta charset="UTF-8">
  <title>페이지</title>
 </head>
 <body>
<ul id="ul_list">
	<li>사과</li>
	<li>바나나</li>
	<li>오렌지</li>
	<li>딸기</li>
	<li>망고</li>
<ul>
 </body>
</html>

ul태그안에 li태그들이 구성된 코드입니다. 과일5개를 미리 정의해두었습니다. ㅎㅎ

뭔가 동적으로 넣어주려면? 추가할 아이템을 넣을 입력창과 버튼정도는 넣어두어야겠죠 ㅎㅎ?

<!doctype html>
<html lang="en">
 <head>
 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
 <style>
	
 </style>
 <script>
function action_add(){
	var text_add = $("#text_add").val(); //입력할 글씨
	var ul_list = $("#ul_list"); //ul_list선언
	ul_list.append("<li>"+text_add+"</li>"); //ul_list안쪽에 li추가
}
 </script>
  <meta charset="UTF-8">
  <title>페이지</title>
 </head>
 <body>
 
<input type="text" id="text_add"/>
<input type="button" id="btn_add" onclick="action_add()" value="추가"/>
<ul id="ul_list">
	<li>사과</li>
	<li>바나나</li>
	<li>오렌지</li>
	<li>딸기</li>
	<li>망고</li>
<ul>

 </body>
</html>

기존 ul태그 위쪽에 택스트입력창과 버튼을 추가해주었구요~

버튼에는 action_add()라는 함수를 연결시켜주었습니다.

위쪽 action_add라는 함수는 주석으로 입력한대로 입력한 글씨값을 받아오고 ul태그의 객체를 선언하였습니다.

그리고 제일 중요한 ul객체에 append()라는 메소드를 사용하여 li를 추가하는 것을 볼수있습니다.

append()는 해당태그에 제일 마지막에 추가하는 것이 특징입니다~

사과를 한번 더 추가시켜줘보겟습니다.

이런 결과를 볼수가 있네요 ㅎㅎ

이번에는 remove()메소드를 사용하여 li태그를 동적으로 삭제해보겠습니다.

li태그마다 id값이 있어서 어떤 객체를 삭제하는지 명확한 형태가 이해하기 제일 좋을 것 같아서 li태그 마다 'li_숫자'의 형태로 id값을 선언하였습니다.

실제 예제소스를 보시면~

<!doctype html>
<html lang="en">
 <head>
 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
 <style>
	
 </style>
 <script>
function action_remove(){
	var text_remove = $("#text_remove").val(); //삭제할 li태그의 id값 가져오기
	$("#"+text_remove).remove(); //해당id의 li태그 삭제하기
}
 </script>
  <meta charset="UTF-8">
  <title>페이지</title>
 </head>
 <body>
 
<input type="text" id="text_remove"/>
<input type="button" id="btn_remove" onclick="action_remove()" value="삭제"/>
<ul id="ul_list">
	<li id="li_1">사과</li>
	<li id="li_2">바나나</li>
	<li id="li_3">오렌지</li>
	<li id="li_4">딸기</li>
	<li id="li_5">망고</li>
<ul>

 </body>
</html>

택스트창에는 li의 id값을 입력해야합니다.

다음은 실행한 결과입니다~

li_2라고 선언한 바나나가 삭제된 것을 확인할 수 있습니다.

append와 remove는 li의 값을 동적으로 보여주었다가 안보여주었다가 할 때 좋은 메소드가 아닐까 생각되네요.

그럼 좋은 하루되세요~

Topic: JavaScript / jQueryPrev|Next

Answer: Use the jQuery `append()` Method

You can simply use the jQuery append() method to add <li> elements in an existing <ul> element.

The following example will add a <li> element at the end of an <ul> on click of the button.

<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Add LI to an Existing UL</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#menu").append('<li><a href="#">New list item</a></li>');
    });
});
</script>
</head>
<body>
    <ul id="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
    </ul>
    <button type="button">Add New LI Element</button>
</body>
</html>