About .innerText

Today I decided to create a dev blog, because I found something that I wanted to write down as I was studying Javascript.

I hope this is something that future I will be laughing at because it's such a stupid mistake.

So, I wanted to make a delete button right beside a to-do-list created.

function paintTodo(event) {
    const li = document.createElement("li");
    const button = document.createElement("button");
    toDoList.appendChild(li);
    li.appendChild(button);
    button.innerText="X";
    li.innerText=event;
}

This will not work, because .innerText removes all of the node's children and replaces it with the text. So, you have to do this instead:

function paintTodo(event) {
    const li = document.createElement("li");
    const span = document.createElement("span");
    const button = document.createElement("button");
    toDoList.appendChild(li);
    li.appendChild(span);
    li.appendChild(button);
    button.innerText="X";
    span.innerText=event;
}

You have to create a separate tag, in this case span, that will handle the to-do-list text. The button will be under li, unaffected by the .innerText=event.