Форум

a45 · #1 (**permalink**) 28.12.2019, 19:29

Добрый день.

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

<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

рони · #2 (**permalink**) 28.12.2019, 19:39

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

taskLiElem.append(chEl)

taskLiElem.prepend(chEl)

рони · #3 (**permalink**) 28.12.2019, 19:43

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>

a45 · #4 (**permalink**) 28.12.2019, 20:02

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

Форум

Справочник

Discord чат

Курсы javascript