如何将多个子元素附加到父元素Javascript

Question

大家好，我是编程新手，如果我的问题看起来很愚蠢或太简单，我很抱歉。我正在尝试在父元素上附加 4 个不同的子元素。

我正在构建一个待办事项列表应用程序，我希望该应用程序以这样一种方式工作，即当输入并保存“任务”时，输入的任务将出现在带有复选框、删除按钮的列表中，和一个编辑按钮。我尝试使用 .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>