Javascript-форум - createElement и append

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - createElement и append (https://javascript.ru/forum/dom-window/79173-createelement-i-append.html)

createElement и append

Добрый день.

небольшой примерчик

<input id="taskEdt" type="text">            
<hr>
<ul id="todoList">
  <li><input type="checkbox">Задача 1</li>
  <li><input type="checkbox">Задача 2</li>
</ul>

const taskNameEdit = document.getElementById("taskEdt")
const todoList     = document.getElementById("todoList")

taskNameEdit.onkeydown = e => {
    if (e.key=="Enter" || e.keyCode==13){               

        let chEl = document.createElement("input")
        
        chEl.type = "checkbox"
        
        let taskLiElem = document.createElement("li") 
        
        taskLiElem.innerText = taskNameEdit.value
      
        taskLiElem.append(chEl)
      
        todoList.append(taskLiElem)        

        taskNameEdit.value = ""
    }        
}

в результате элемент как то не так добавляется

https://prnt.sc/qguwre

Цитата:

Сообщение от a45

taskLiElem.append(chEl)

taskLiElem.prepend(chEl)

a45,
или так

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>
<body>
<input id="taskEdt" type="text">
<hr>
<ul id="todoList">
  <li><input type="checkbox">Задача 1</li>
  <li><input type="checkbox">Задача 2</li>
</ul>
<script>
const taskNameEdit = document.getElementById("taskEdt")
const todoList     = document.getElementById("todoList")

taskNameEdit.onkeydown = e => {
    if (e.key=="Enter" || e.keyCode==13){

        let chEl = document.createElement("input")

        chEl.type = "checkbox"

        let taskLiElem = document.createElement("li")

        let txt = document.createTextNode(taskNameEdit.value)

        taskLiElem.append(chEl, txt)

        todoList.append(taskLiElem)

        taskNameEdit.value = ""
    }
}

</script>
</body>
</html>

огромное спасибо