如何将多个子元素附加到父元素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

在click事件中创建按钮元素。 当前，您将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> 

Answer 2

您必须使用cloneNode => https://developer.mozilla.org/zh-CN/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>