PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Thursday, May 12, 2022

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

 May 12, 2022     append, dom, javascript     No comments   

Issue

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.


Solution

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 By - Tushar
Answer Checked By - Mildred Charles (PHPFixing Admin)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing