如何使用JavaScript将按钮附加到列表项

How do I append a button to a list item with JavaScript?

本文关键字：列表 按钮 何使用 JavaScript      更新时间：2023-09-26

每次向数组中添加项时都会运行此函数。它只需创建一个列表项元素，将一些文本附加到该项，然后将其附加到列表元素（#requestList）。

function UpdateListOnScreen(NewListItem){
  
  var grabList = document.getElementById('requestList');
  
  var text = ""+ GetCalendarName(NewListItem.calChoice) +" For "+ GetLessonSlot(NewListItem.lessonChoice) + " On " + GetDateInTextForm(NewListItem.date) + "";
  var entry = document.createElement('li');
  entry.id = list.length-1;
  entry.className = "ItemNotChecked";
  entry.appendChild(document.createTextNode(text));
  grabList.appendChild(entry);
}

我很难弄清楚的是，我该如何在列表项中添加按钮元素？我希望每个列表项都有自己的按钮元素，但似乎不知道在将文本附加到列表项后如何将按钮附加到列表项目。

谢谢。

这是一个如何插入按钮的示例：

var ul = document.getElementById("list");
var li = document.createElement("li");
li.appendChild(document.createTextNode("Four"));
var button = document.createElement("button");
button.innerHTML = "asdasd";
li.appendChild(button);
li.setAttribute("id","element4");
ul.appendChild(li);
alert(li.id);
<ul id="list"></ul>

这应该可以做到：

function UpdateListOnScreen(NewListItem) { 
  var grabList = document.getElementById('requestList');
  var text = "" + GetCalendarName(NewListItem.calChoice) + " For " + GetLessonSlot(NewListItem.lessonChoice) + " On " + GetDateInTextForm(NewListItem.date) + "";
  var entry = document.createElement('li');
  entry.id = list.length - 1;
  entry.className = "ItemNotChecked"; 
  entry.appendChild(document.createTextNode(text));
  /*Add a button to each LI */
  var button = document.createElement('button');
  button.innerText = 'Click me!';
  entry.appendChild(button);
  grabList.appendChild(entry);
}
相关文章：