Vanilla JS 동적 요소 추가/삭제

 

jQuery

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<ul class="dynamic-list"></ul>
<button class="add">추가</button>
<script>
  $('.add').click(function(){
    $('.dynamic-list').append('<li>새 항목</li>');
  });
</script>

 

Vanilla JS

<ul class="dynamic-list"></ul>
<button class="add">추가</button>
<script>
  const list = document.querySelector('.dynamic-list');

  document.querySelector('.add').addEventListener('click',function(){
   const li = document.createElement("li");
   li.textContent = "새 항목";
   list.appendChild(li);
  })
</script>

 

• const li = document.createElement("li"); //새 li요소를 생성
• li.textContent = "새 항목"; //텍스트 내용을 설정
• list.appendChild(li); //ul 또는 ol에 추가