如何将多个子元素附加到父元素Javascript [英] How do I append more than one child element to a parent element Javascript

问题描述

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

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.

我正在构建待办事项列表"应用程序，并且希望该应用程序以这样的方式工作:输入并保存任务"后，输入的任务将出现在带有复选框，删除按钮的列表中，和一个编辑按钮.我尝试使用.appendchild()将子元素附加到其父元素上，但无法正常工作.

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

我希望程序执行的操作是在每次单击保存"按钮时向其添加inputToDoList.value，复选框，编辑按钮和删除按钮，但是该功能仅在我第一次单击保存按钮时才起作用时间.在随后的几次单击保存"按钮时，仅将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.

推荐答案

您必须使用 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>

这篇关于如何将多个子元素附加到父元素Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！