JQuery ul li 추가 - jQuery ul li chuga

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

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

<!doctype html> <html lang="en"> <head> <script src="//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="//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" title="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="//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" title="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="//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>

Related FAQ

Here are some more FAQ related to this topic:

  • How to add attribute to an HTML element in jQuery
  • How to move an element into another element using jQuery
  • How to remove elements from DOM in jQuery

Toplist

최신 우편물

태그