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

Question

This function is run every time an item is added to an array. It simply creates a list item element, appends some text to that item, and then appends it to a list 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 I'm struggling to figure out is how do I add a button element onto that list item? I want every list item to have its own button element, but can't seem to figure out how I append a button to the list item after appending the text to the list item.

Thanks.

Tushar Gupta · Accepted Answer · 2015-03-03 11:54:09Z

10

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>

answered Mar 3, 2015 at 11:54

Tushar Gupta

16k1 gold badge33 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mushroomator · Accepted Answer · 2022-04-04 20:24:37Z

1

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

edited Apr 4, 2022 at 20:24

Mushroomator

9,6881 gold badge26 silver badges44 bronze badges

answered Mar 3, 2015 at 11:48

HaukurHaf

13.9k6 gold badges47 silver badges62 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related