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.
Top comments (0)