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