如何将 <Button> 附加到 <li> ？ (javascript)答案

【问题标题】：How do I append a button to a list item with JavaScript?如何将 <Button> 附加到 <li> ？ (javascript)
【发布时间】：2015-05-04 01:20:16
【问题描述】：

每次将项目添加到数组时都会运行此函数...它只是创建一个“li”元素，将一些文本附加到该项目...然后将其附加到“ul”元素（#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);
}

我正在努力弄清楚如何在该列表项上添加“按钮”标签？我希望每个列表项都有自己的“按钮”标签，但似乎无法弄清楚在将文本附加到 li 后如何将按钮附加到 li ..

希望这是有道理的：S

谢谢:D

【问题讨论】：

标签： javascript dom append

【解决方案1】：

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

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);

&lt;ul id="list"&gt;&lt;/ul&gt;

【讨论】：

【解决方案2】：

这应该可以解决问题；

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); }

【讨论】：