[Javascript] ul, ol에 li 동적으로 추가, 삭제 하기

 

HTML에서 목록을 표현할 때, <ul>, <ol>, <li> 를 사용합니다.

[HTML] 순서없는 목록 만들기

[HTML] 순서있는 목록 만들기

 

 

이번에는 HTML에서 목록을 표현하는 <ul>, <ol>, <li>에

동적으로 목록을 추가하고 삭제할 수 있는 방법을 소개합니다.

 

 

<ul>에 <li> 동적으로 추가하기

 

사용자에게 <ul> 목록에 추가할 값을 입력 받고,

그 값을 목록에 추가하는 예제입니다.

 

<li> element를 생성하고,

appendChild() 메소드를 사용하여

<ul> 목록에 <li> element를 추가하였습니다.

 

 

<ol>에 <li> 동적으로 추가하기

 

순서 있는 목록인 <ol>에 항목을 추가하는 것도

<ul>에 항목을 추가하는 것과 다르지 않습니다.

HTML에서 목록의 유형으로 <ol>로 변경해 주기만 하면 되겠죠?

 

 

<li> 동적으로 삭제하기

 

위 예제는

버튼을 누를 때마다 기존의 <ul> 목록의 첫번째 항목을 삭제합니다.

 

getElementsByTagName('li') 메소드는

태그네임이 'li'인 모든 element 목록을 리턴합니다.

(처음에 위 예제에는 <li> element가 3개 이므로, 길이가 3인 element 목록을 리턴하겠죠?)

우리는 이 중에서 가장 첫번째 항목을 삭제하려고 하므로,

items[0] 구문을 사용해서 목록에서 첫번째 element를 찾고, 

이 element를 remove() 함수를 사용하여 삭제합니다.