Как добавить более одного дочернего элемента в родительский элемент Javascript

Question

Добрый день всем, я новичок в программировании, поэтому извините, если мой вопрос выглядит глупым или слишком простым.Я пытаюсь добавить 4 различных дочерних элемента на родительский элемент.

Я создаю приложение To Do List и хочу, чтобы приложение работало таким образом, чтобы при вводе и сохранении «задачи» появившаяся задача появлялась в списке с флажком,кнопка удаления и кнопка редактирования.Я попытался добавить дочерние элементы к их родительскому элементу с помощью .appendchild (), но он не работает.

<Ol id="ol">
    <li>
        <input type="checkbox">Read a novel
        <button>Edit</button>
        <button>Delete</button>
    </li>
    <li>
        <input type="checkbox">Take a walk
        <button>Edit</button>
        <button>Delete</button>
    </li>
</Ol>






let inputToDoList= document.getElementById('inputToDoList');

let addButton=  document.getElementById('addButton');
let editButton= document.createElement('button');
let deleteButton= document.createElement('button');
let checkInput= document.createElement('input');

checkInput.type= "checkbox"
deleteButton.innerText= "Delete"
editButton.innerText= "Edit"


addButton.addEventListener('click', () => {
   let ol= document.getElementsByTagName('ol')[0];
   let li= document.createElement('li');

   li.textContent= inputToDoList.value
   ol.appendChild(checkInput) 
   ol.appendChild(li)
   ol.appendChild(editButton)
   ol.appendChild(deleteButton)

   if(inputToDoList.value.length > 0){
      inputToDoList.value='';
}
});

Что я хочу, чтобы программа сделала, это добавьте inputToDoList.value, флажок, кнопку редактирования и кнопку удалениякаждый раз, когда нажимается кнопка «Сохранить», но функция работает только тогда, когда я нажимаю кнопку «Сохранить» в первый раз.Когда я нажимаю кнопку «Сохранить» в последующие времена, в список добавляется только inputToDoList.value.Другие элементы, такие как флажок, кнопка редактирования и кнопка удаления, больше не будут добавлены.

Answer 1

вы должны использовать cloneNode => https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode

// making of LI type element, with checkBox, Text and buttons Edit / delete :
const LI_toDo      = document.createElement('li')
,     chk_toDo     = document.createElement('input')
,     txt_toDo     = document.createElement('span')
,     bt_edit_toDo = document.createElement('button')
,     bt_del_toDo  = document.createElement('button')
;
chk_toDo.type            = "checkbox";
bt_edit_toDo.textContent = 'Edit';
bt_del_toDo.textContent  = 'Delete';

LI_toDo.appendChild(chk_toDo);
LI_toDo.appendChild(txt_toDo);
LI_toDo.appendChild(bt_edit_toDo);
LI_toDo.appendChild(bt_del_toDo);
// - - - - - - - - - -- - - - -- - - -making completed...

const inputToDoList = document.getElementById('inputToDoList')
,     List_ol       = document.getElementById('ol')
;

document.getElementById('addButton').onclick = function()
{
  txt_toDo.textContent  = inputToDoList.value;
  inputToDoList.value   = '';
  List_ol.appendChild( LI_toDo.cloneNode(true) );
}


List_ol.onclick = function(e)              //  clicks events over 'ol' elements
{                     
  if (!e.target.matches('button')) return; // check if it is on a button

  switch (e.target.textContent)
  {
    case 'Edit':    EditButton(e.target.parentNode);    break; //  e.target.parentNode 
    case 'Delete':  DeleteButton(e.target.parentNode);  break; // === LI parent of clicked button 
  }
}

function EditButton(toDo_LI)
{
  let SpanTxt = toDo_LI.querySelector('span')
  ,   change  = prompt('Edit..',SpanTxt.textContent )
  ;
  if (change) { SpanTxt.textContent = change }
}

function DeleteButton(toDo_LI)
{
  let SpanTxt = toDo_LI.querySelector('span')
  ,   Del     = confirm(`please confirm delete of ${SpanTxt.textContent}`)
  ;
  if (Del) { List_ol.removeChild( toDo_LI ) }
}

span {
  display: inline-block;
  width: 200px;
  padding : 0 5px 5px 0; 
  border-bottom :1px solid lightblue;
}
button { margin: 5px }

<div>
  <label>what to do : </label><input id="inputToDoList" type="text">
  <button id="addButton">add</button>
</div>

<ol id="ol"></ol>

Answer 2

Создание элементов кнопки внутри события нажатия. В настоящее время вы поместили createElement вне события addButton. По вашему требованию кнопки должны быть созданы в событии добавления клика, поэтому создание элемента должно происходить в событии добавления клика.

let inputToDoList = document.getElementById('inputToDoList');

let addButton = document.getElementById('addButton');

let ol = document.getElementById('ol');
addButton.addEventListener('click', () => {
  let editButton = document.createElement('button');
  let deleteButton = document.createElement('button');
  let checkInput = document.createElement('input');
  checkInput.type = "checkbox"
  deleteButton.innerText = "Delete"
  editButton.innerText = "Edit"
  let li = document.createElement('li');
  li.textContent = inputToDoList.value
  ol.appendChild(checkInput)
  ol.appendChild(li)
  ol.appendChild(editButton)
  ol.appendChild(deleteButton)

  if (inputToDoList.value.length > 0) {
    inputToDoList.value = '';
  }
});

<input type="text" id="inputToDoList" />
<button id="addButton">
Add
</button>
<ol id="ol">

</ol>