Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.12.2019, 19:29
a45 a45 вне форума
Новичок на форуме
Отправить личное сообщение для a45 Посмотреть профиль Найти все сообщения от a45
 
Регистрация: 28.12.2019
Сообщений: 5

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
Ответить с цитированием
  #2 (permalink)  
Старый 28.12.2019, 19:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от a45
taskLiElem.append(chEl)

taskLiElem.prepend(chEl)
Ответить с цитированием
  #3 (permalink)  
Старый 28.12.2019, 19:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #4 (permalink)  
Старый 28.12.2019, 20:02
a45 a45 вне форума
Новичок на форуме
Отправить личное сообщение для a45 Посмотреть профиль Найти все сообщения от a45
 
Регистрация: 28.12.2019
Сообщений: 5

огромное спасибо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите плиз с append lok105 jQuery 19 06.01.2015 12:03
не большой вопросик по методу append() kowapos Общие вопросы Javascript 13 06.05.2014 21:27
Проблема! Добавление элементов с помощью append() и работа с ними Gurchava jQuery 3 14.04.2014 17:09
append в append NeVirus Элементы интерфейса 1 05.08.2013 06:34
Как в браузерах реализуются функции DOM (например createElement) iamme Общие вопросы Javascript 7 02.09.2011 20:26