How to create an object of an <li> element?-CodePudding

I created a To-Do List with JS. I'm mostly finished but my last task is to create a local storage. The purpose of that is, that the Tasks should not vanish, when I reload the page. I know that I have to create an array of objects for that, but I don't know how to represent my <'li'> element as an object. So how do I represent my Tasks as an object to create an array

add.addEventListener("click", function (){

    // create task text
    if(task.value != ""){
    let li = document.createElement('li');
    ul.appendChild(li);

        // create checkbox
        let box = document.createElement('input');
        box.setAttribute('type', 'checkbox');
        li.appendChild(box);
        box.classList.add('check');

    //create span
        let span = document.createElement('span');
        li.appendChild(span);
        span.innerHTML= task.value;
        span.classList.add('task');


    // create delete button
    let btn = document.createElement('button');
    li.appendChild(btn);
    btn.classList.add("delete-btn");
    btn.innerHTML = 'x';
    btn.onclick = function () {
        btn.parentElement.remove();
    };
});

CodePudding user response：

You already create a object from <li> element in let li = document.createElement('li');, now you just have to append it to a array

liArray=[]
let li = document.createElement('li');
liArray.push(li);

Just declare the array before if(task.value != ""):

add.addEventListener("click", function (){

// create task text
if(task.value != ""){
let li = document.createElement('li');
liArray.push(li);
ul.appendChild(li);

// create checkbox
let box = document.createElement('input');
box.setAttribute('type', 'checkbox');
li.appendChild(box);
box.classList.add('check');

//create span
let span = document.createElement('span');
li.appendChild(span);
span.innerHTML= task.value;
span.classList.add('task');


// create delete button
let btn = document.createElement('button');
li.appendChild(btn);
btn.classList.add("delete-btn");
btn.innerHTML = 'x';
btn.onclick = function () {
    btn.parentElement.remove();
};

// create task text
if(task.value != ""){
let li = document.createElement('li');
ul.appendChild(li);

// create checkbox
let box = document.createElement('input');
box.setAttribute('type', 'checkbox');
li.appendChild(box);
box.classList.add('check');

//create span
let span = document.createElement('span');
li.appendChild(span);
span.innerHTML= task.value;
span.classList.add('task');


// create delete button
let btn = document.createElement('button');
li.appendChild(btn);
btn.classList.add("delete-btn");
btn.innerHTML = 'x';
btn.onclick = function () {
    btn.parentElement.remove();
};

liArray will store you all your <li> elements