How do I Append a <Button> to a <li> ? (javascript)

Question

This function is run everytime an item is added to an array... It simply creates an "li" element, appends some text to that item... and then appends it to a "ul" element (#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);
}

Something im struggling to figure out is how do I add a "button" tag onto that List item? I want every List item to have its own "button" tag, but cant seem to figure out how I append a button to the li after appending the text to the li..

Hope that makes sense :S

Thanks :D

Solution 1

This is an example how you can insert button :

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>

Solution 2

This should do the trick;

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