How do I append more than one child element to a parent element Javascript

问题

Good day everyone, I am new to programming, so I am sorry if my question looks stupid or too simple. I am trying to append 4 different child elements on a parent element.

I am building a To Do List app, and I want the app to work in such a way that when the 'task' is entered and saved, the entered task will appear on a list with a checkbox, a delete button, and an edit button. I tried appending the child elements on their parent element using .appendchild() but it's not working.

<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='';
}
});

What I want the program to do is to add inputToDoList.value, checkbox, edit button and delete button to the each time the 'save' button is clicked on but the function only works when I click on the save button the first time. When I click on the 'save' button the subsequent times, it's only the inputToDoList.value that is added to the list. The other elements i.e. checkbox, edit button and delete button will no longer be added.

回答1:

you have to use 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>

回答2:

Create the button elements inside the click event. Currently you placed the createElement outside the addButton event. As per your requirement the buttons should be created in the add click event, hence the element creation should happen inside the add click event.

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>

来源：https://stackoverflow.com/questions/56386279/how-do-i-append-more-than-one-child-element-to-a-parent-element-javascript