如何為無序列表中的每個列表項添加一個按鈕？

Question

我正在嘗試制作一個簡單的待辦事項列表應用程序，但不確定如何在每個列表項旁邊添加“刪除”按鈕。 到目前為止，我的代碼如下：

 document.getElementById("add").onclick = function() { var text = document.getElementById("input").value; var li = "<li>" + text + "</li>"; document.getElementById("list").insertAdjacentHTML('beforeend', li); document.getElementById("input").value = ""; // clear the value }

 <h1>To-Do List</h1> <input type="text" id="input" /> <input type="button" value="Add Note" id="add" /> <ul id="list"></ul>

Answer 1

它可以在您添加<li>元素的同一位置完成：

var li = "<li>" + text + "<button type='button'>delete</button></li>";

Answer 2

一種方法是使用 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

document.getElementById("add").onclick = function() {
    var text = document.getElementById("input").value;
    var li = `<li>${text} <input type="button" value="Delete"></li>`;
    document.getElementById("list").insertAdjacentHTML('beforeend', li);
    document.getElementById("input").value = ""; 
}