Javascript - div 생성, 추가, 삭제 방법

Javascripthtml

Javascript를 이용하여 div 요소를 동적으로 생성하고 삭제하는 방법에 대해서 알아보겠습니다.

동적으로 div 생성, 추가, 삭제

버튼을 클릭할 때 div 추가하거나 삭제하는 예제입니다.

HTML

id가 container인 div를 추가하였고, 추가 버튼을 누르면 새로운 div를 생성하여 container에 추가하고 삭제 버튼을 누르면 가장 마지막의 div를 삭제하려고 합니다.

<div id="container">
  <!-- 생성된 div들이 여기에 추가됩니다. -->
</div>

<button id="addDivBtn">추가</button>
<button id="removeDivBtn">삭제</button>

Javascript

먼저 추가, 삭제 버튼의 요소를 가져와서 클릭 이벤트 리스너를 설정합니다.

추가 버튼을 클릭하면 addDiv() 함수가 호출되며 div를 추가합니다.

  • document.createElement("div") : div 요소를 생성
  • newDiv.textContent = "새로운 div" : div에 새로운 내용을 입력
  • container.appendChild(newDiv) : container 요소 하위에 div를 추가

삭제 버튼을 누르면 가장 마지막 Index의 div를 삭제합니다.

  • document.createElement("div") : div 요소를 생성
  • container.getElementsByTagName("div") : container 하위에 등록된 div 요소들 모두 가져옴
  • container.removeChild(divs[divs.length - 1]) : 가장 마지막 요소를 container에서 제거
const addDivButton = document.getElementById("addDivBtn");
const removeDivButton = document.getElementById("removeDivBtn");
addDivButton.addEventListener("click", addDiv);
removeDivButton.addEventListener("click", removeDiv);

function addDiv() {
  const container = document.getElementById("container");
  const newDiv = document.createElement("div");
  newDiv.textContent = "새로운 div";
  container.appendChild(newDiv);
}

function removeDiv() {
  const container = document.getElementById("container");
  const divs = container.getElementsByTagName("div");

  // 하위 요소가 1개 이상 있을 때
  if (divs.length > 0) {
    container.removeChild(divs[divs.length - 1]);
  }
}

Output:

Loading script...

Related Posts

codechachaCopyright ©2019 codechacha