如何在javascript中将按钮动态添加到数组项目列表中答案

【问题标题】：How do I dynamically add Buttons to a list of Array ITEMS in javascript如何在javascript中将按钮动态添加到数组项目列表中
【发布时间】：2021-01-02 18:20:16
【问题描述】：

我想将删除按钮添加到数组“列表”的元素中。我的语法应该是正确的，但由于某种原因不起作用。然后，这些按钮将在单击时删除一个元素。 Add 函数正在工作，并且项目正在显示在无序列表中，从数组中我想在数组的每个成员旁边显示一个删除按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To Do APP</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
        <h1>TO DO LIST</h1>
        <input type="text" placeholder="Add Activity" id="event" name="events">
        <button id="add" onclick="Add()">Add</button>
    
            <ul id="sec"> 
                  
            </ul>
        
</body>
<script>
var lists=[];
function Add(){
    var list=document.getElementById("event").value
    var s= lists.includes(list);
    if (s==true){
        alert("Activity already added")
    }else{
        lists.push(list)
        console.log(lists) 
    }
    var output=lists.join('<br/>');
    document.getElementById("sec").innerHTML=output;
}
//delete activity from list
function remove(){

}

//Create buttons for items
function createBtn(){
    var sec= document.getElementById('sec')
    for(var i=0; i<lists.length;i++){
        var butn=document.createElement("button");
        butn.innerHTML=lists[i];
        sec.appendChild(butn);
    }
}

</script>
</html>

【问题讨论】：

document.getElementById("sec").innerHTML=output; - 你应该避免这样做，因为它会使 DOM 对象引用无效。它还使您容易受到脚本注入攻击 - 这也意味着如果有人在输入文本框中键入 < 字符，您的脚本将根本无法工作。
快速浏览一下，我发现您没有调用 createBtn 函数，请先尝试这样做。

标签： javascript html arrays

【解决方案1】：

有很多方法可以做到这一点，这里是一种（遵循您的代码中已有的内容）

var activities = [];

const addActivity = () => {
  var activity = document.getElementById("event").value;

  if (activities.includes(activity)) {
    alert("Activity already added")
  } else {
    activities.push(activity)
    document.getElementById("sec").innerHTML += `<li idx="${activities.length-1}">${activity} <button type="button" onclick="deleteActivity()">Delete</button></li>`
  }
}

const deleteActivity = () => {
  const btn = event.target;
  const index = parseInt(btn.parentElement.getAttribute("idx"), 10);
  activities.splice(index, 1);
  document.getElementById("sec").innerHTML = activities.map((activity, i) => {
    return `<li idx="${i}">${activity} <button type="button" onclick="deleteActivity()">Delete</button></li>`
  });
}

 ul {
   list-style-type: none;
 }
 li {
   margin: 4px;
 }

<h1>TO DO LIST</h1>
<input type="text" placeholder="Add Activity" id="event" name="events">
<button id="add" onclick="addActivity()">Add</button>

<ul id="sec">
</ul>

【讨论】：

感谢您的回复。我不习惯 Jquery，所以我很难理解带有 $ 符号的代码部分
我也不用jquery
${} 语法是什么意思？
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…