Javascript - <ol>, <ul>에 <li> 동적 추가, 삭제

Javascripthtml

<ol>은 ordered list, <ul>은 unordered list로, 둘다 리스트를 표현하는데 사용되는 태그입니다.

ol 또는 ul에 아이템을 추가할 때 하위에 <li>를 추가해야하는데요, Javascript로 어떻게 동적 추가할 수 있는지 알아보겠습니다.

1. li 태그 동적 추가

HTML

HTML은 기본적으로 ul과 li를 사용하여 리스트가 구현되어있습니다. 그리고 버튼을 누를 때 Javascript에서 동적으로 li가 추가될 수 있도록 하려고 합니다.

<ul id="myList">
  <li>첫 번째 아이템</li>
  <li>두 번째 아이템</li>
</ul>

<button id="addItemBtn">아이템 추가</button>

예제는 <ul>로 리스트를 구현하였지만, <ol>의 경우도 동일한 방법으로 <li>를 동적으로 추가할 수 있습니다.

Javascript

Javascript에서는 버튼에 클릭 이벤트 리스너를 등록하고, 버튼이 클릭될 때 li를 동적으로 추가합니다.

  • createElement("li") : <li/> 요소를 생성
  • textContent = "새로운 아이템" : li의 content를 변경
  • myList.appendChild(newListItem) : 리스트에 동적 생성한 li 요소 등록
const addButton = document.getElementById("addItemBtn");
addButton.addEventListener("click", addListItem);

function addListItem() {
  const myList = document.getElementById("myList");

  const newListItem = document.createElement("li");
  newListItem.textContent = "새로운 아이템";

  myList.appendChild(newListItem);
}

Output:

2. li 태그 동적 삭제

HTML

기본적으로 리스트에 3개의 아이템이 추가되어있고, 버튼을 누르면 리스트에서 마지막 아이템을 삭제하려고 합니다.

<ul id="myList">
  <li>첫 번째 아이템</li>
  <li>두 번째 아이템</li>
  <li>세 번째 아이템</li>
</ul>

<button id="removeItemBtn">마지막 아이템 삭제</button>

Javascript

먼저 버튼에 클릭 이벤트 리스너를 등록하고, 버튼이 눌렸을 때 리스트의 마지막 요소를 찾아 아이템을 삭제하도록 구현하였습니다.

  • getElementsByTagName("li") : li 태그의 모든 elements 리턴
  • listItems[listItems.length - 1] : 리스트의 마지막 요소
  • myList.removeChild(element) : myList에서 element 삭제
const removeButton = document.getElementById("removeItemBtn");
removeButton.addEventListener("click", removeLastListItem);

function removeLastListItem() {
  const myList = document.getElementById("myList");
  const listItems = myList.getElementsByTagName("li");

  // ul에 li 아이템이 있는 경우에만 수행
  if (listItems.length > 0) {
    // 마지막 li 아이템을 제거
    myList.removeChild(listItems[listItems.length - 1]);
  }
}

Output:

Loading script...

Related Posts

codechachaCopyright ©2019 codechacha