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

 

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

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

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

 

 

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

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

 

 

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

<ul id='fruits'></ul>

<input type='text' id='addValue' />
<input type='button' value='추가' onclick='addList()' />

function addList()  {
  
  // 1. 추가할 값을 input창에서 읽어온다
  const addValue 
    = document.getElementById('addValue').value;
  
  // 2. 추가할 li element 생성
  // 2-1. 추가할 li element 생성
  const li = document.createElement("li");
  
  // 2-2. li에 id 속성 추가 
  li.setAttribute('id',addValue);
  
  // 2-3. li에 text node 추가 
  const textNode = document.createTextNode(addValue);
  li.appendChild(textNode);
  
  // 3. 생성된 li를 ul에 추가
  document
    .getElementById('fruits')
    .appendChild(li);
}

 

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

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

 

<li> element를 생성하고,

appendChild() 메소드를 사용하여

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

 

 

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

<ol id='fruits'></ol>

<input type='text' id='addValue' />
<input type='button' value='추가' onclick='addList()' />

function addList()  {
  
  // 1. 추가할 값을 input창에서 읽어온다
  const addValue 
    = document.getElementById('addValue').value;
  
  // 2. 추가할 li element 생성
  // 2-1. 추가할 li element 생성
  const li = document.createElement("li");
  
  // 2-2. li에 id 속성 추가 
  li.setAttribute('id',addValue);
  
  // 2-3. li에 text node 추가 
  const textNode = document.createTextNode(addValue);
  li.appendChild(textNode);
  
  // 3. 생성된 li를 ol에 추가
  document
    .getElementById('fruits')
    .appendChild(li);
}

 

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

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

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

 

 

<li> 동적으로 삭제하기

<ul id='fruits'>
  <li>사과</li>
  <li>바나나</li>
  <li>오렌지</li>
</ul>

<input type='button' value='삭제' onclick='removeItem()' />

function removeItem()  {
  
  // 1. <ul> element 선택
  const ul = document
    .getElementById('fruits');
  
  // 2. <li> 목록 선택
  const items = ul.getElementsByTagName('li');
  
  // 3. <li> 목록 중 첫번째 item 삭제
  if(items.length > 0)  {
    items[0].remove();
  }
  
}

 

위 예제는

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

 

getElementsByTagName('li') 메소드는

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

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

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

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

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