I am creating simple “to do list” by Java Script. I have template for tasks, which content I would like to clone, and then I am trying to insert task’s text inside this content.

<template id="li-temp">
    <li class="todo-item__undone"></li>
    <button class="delete-item-button delete-item-button-not-displayed">&#10008;</button>
</template>

A method, which try to clone template's content and insert task's content:

createTaskHtml(content, status, id){
    let template = document.getElementById("li-temp").content.cloneNode(true);
    let li = template.firstChild;
    let li_test = document.createElement("li")
    li.id = id;
    li.innerText = content;
    let deleteButton = template.lastChild;
    if (status === "done"){
        li.classList.add("todo-item__done");
        deleteButton.classList.remove("delete-item-button-not-displayed");
        this.setListener(deleteButton);
    }
    return li;
}

I used "content" to get template's content, then I used method "cloneNode(true)" for deep cloning. I am expecting to get node with two children (li and button), so I am truing to get object li as firstChild. But then I am getting an error becouse object li doesn't have attribute "id" and "innerText".

I debuged this code and was surprised to find that WebStorm identified this node as text node. So I assume that I am somehow copying the content of the template incorrectly, but, of course, I admit that the error may be in something else