How do I turn created div Element into an object so that I can convert to JSON?

Question

So I have been trying to get my list to save to local storage when it's pushed into an empty array. However, JSON can not convert an HTML Element, I have tried taking an HTML element and turn into an object, but still no luck.

End result should be being able to convert the HTML element so that it can be read through a JSON.stringify() .

JS

const tasks = document.createElement("div");

  tasks.innerHTML = `
       <div class="task-content">
        <div class="task" data-id="${id}">
        <div class="new-task-created">${taskNew}</div>
        <label class="due-date">${taskDate}</label>
        <label class="due-time">${taskTime}</label>
    </div>

    <div class="atcion-buttons">
        <button onclick="editItem()" class="edit" data-id="${id}">Edit</button>
        <button onclick="deleteItem()" class="delete" data-id="${id}">Delete</button>
        <button onclick="completeItem()" class="complete" data-id="${id}">Complete</button>
    </div>
</div>`;

const taskData = {
  id: document.querySelector(".task"),
  task: document.querySelector(".new-task-created"),
  dueDate: document.querySelector(".due-date"),
  dueTime: document.querySelector(".due-time"),
}; 

  taskList.push(tasks);
  console.log(taskList);
  storeList();
  el.list.appendChild(tasks);
};

//function that stores task list.
function storeList() {
  localStorage.setItem("tasks", taskList);
}

In the image the HTML Element is causing issues with saving into the localStorage.

The conversion will help with saving the list by local storage.

Answer 1

I think I fixed the issue.

What I did was I put the createId() taskNew taskDate taskTime into an object and got the results I wanted.

const creatTask = (task) => {
  
  const data = {
   id: createId(),
  taskNew: el.input.value,
  taskDate:el.date.value,
   taskTime: el.time.value,
}

  if (!data.taskNew) {
    alert("Please add a new Task");
  }
  if (!data.taskDate) {
    alert("Please add a new Task with a due date");
  }
  if (!data.taskTime) {
    alert("Please add a new Task with a due time");
  }

  const tasks = document.createElement("div");

  tasks.innerHTML = `
       <div class="task-content">
        <div class="task" data-id="${data.id}">
        <div class="new-task-created">${data.taskNew}</div>
        <label class="due-date">${data.taskDate}</label>
        <label class="due-time">${data.taskTime}</label>
    </div>

    <div class="atcion-buttons">
        <button onclick="editItem()" class="edit" data-id="${data.id}">Edit</button>
        <button onclick="deleteItem()" class="delete" data-id="${data.id}">Delete</button>
        <button onclick="completeItem()" class="complete" data-id="${data.id}">Complete</button>
    </div>
</div>`;

  taskList.push(data);
  console.log(taskList);
 storeList();
  el.list.appendChild(tasks);
};

//function that stores task list.
function storeList() {

  let json = JSON.stringify(taskList);
  localStorage.setItem("storage_key", json);
  console.log(json);
}