To Do List...

2024.07.18 - [분류 전체보기] - `cloneNode`메서드

`cloneNode`메서드

<div id="bottom" class="bottom"></div>
<template id="template">
 <div class="list">
  <div class="todo">
   <div class="content">
    <label class="custom-checkbox">
     <input type="checkbox">
     <span class="checkmark"></span>
     <div class="info">
      <p class="text-date"></p>
     </div>
    </label>
   </div>
   <button class="delete">
    <i class="fa-solid fa-minus"></i>
   </button>
  </div>
 </div>
</template>

 

document.addEventListener("DOMContentLoaded", function () {
    const form = document.getElementById('form');
    const date = document.getElementById('date');
    const text = document.getElementById('text');
    const bottom = document.getElementById('bottom');
    const template = document.getElementById('template');

    let cloneCount = 0;

    form.addEventListener("submit", function (event) {
        event.preventDefault();

        const textValue = text.value.trim();
        const dateValue = date.value;

        if (dateValue !== "" && textValue !== "" && cloneCount < 4) {
            const clone = template.content.cloneNode(true); // 깊은 복사
            const textDateElement = clone.querySelector('.text-date');

            textDateElement.textContent = `${textValue} (${dateValue})`;

            const checkbox = clone.querySelector('input[type="checkbox"]');
            checkbox.addEventListener('change', function() {
                if (checkbox.checked) {
                    textDateElement.classList.add('strikethrough');
                } else {
                    textDateElement.classList.remove('strikethrough');
                }
            });

            const deletebtn = clone.querySelector('.delete');
            deletebtn.addEventListener("click", function () {
                deletebtn.parentNode.parentNode.remove();
                cloneCount--;
            });

            bottom.appendChild(clone);
            cloneCount++;
            text.value = "";
            date.value = "";
        }
    });
});

 

 

 

 

 

---

2024.07.18 - [분류 전체보기] - `appendChild`메서드

`appendChild`메서드

bottom.appendChild(clone);

`bottom`은 `form`제출 이벤트가 발생할 때 새로운 클론 요소를 추가하는 부모 요소

 

const clone = template.content.cloneNode(true);

클론 생성

클론은 `template`요소의 콘텐츠를 복제하여 생성됨

 

const textDateElement = clone.querySelector('.text-date');
textDateElement.textContent = `${textValue} (${textValue})`;

클론 수정

클론 내에 `.text-date`클래스를 가진 요소를 찾아서 사용자 입력 값 설정

 

bottom.appendChild(clone);

클론 추가

수정된 클론 요소를 `bottom` 요소의 마지막 자식으로추가

 

 

수정하면서 계속 업로드하겠습니다