create a button and set its class using javascript

Question

i am trying to create a to-do list in JavaScript where list is created dynamically on submitting inputs.What i want is list of task and a delete button besides them.All is done except that i am unable to add classes to button using javascript.

Here is my code..

<button id="add" onclick="takeInput()">Add new task</button>

<script>
function takeInput()
{
  var task=prompt("Enter the new to do work");
  if(task!=null)
  {
    var list=document.createElement("li");
    var btn=document.createElement("button");
    var data=document.createTextNode(person);
    var btndata=document.createTextNode("delete");
    list.appendChild(data);
    btn.appendChild(btndata);
    document.getElementById("list").appendChild(list);
    document.getElementById("list").appendChild(btn);

  }
}
</script>

Zee · Accepted Answer · 2015-06-01 11:46:30Z

9

You can add a class to your dynamically created button like this:

....
var btn=document.createElement("button");
btn.className = "YourClass"; 
//OR
btn.className += " YourClass" //If you want to add to existing classes
....

answered Jun 1, 2015 at 11:46

Zee

8,4805 gold badges39 silver badges59 bronze badges

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

Comments

Saif · Accepted Answer · 2015-06-01 11:42:16Z

2

To add class to any html element you can use.

element.className += " newClass";

This will preserve previous classes and add new class.

In you case it would be like (if you want to add class to you newly created button)

btn.className += " newClass";

if you don't want the previous class.(in your case there is none)

btn.className = " newClass";

answered Jun 1, 2015 at 11:42

Saif

7,1028 gold badges43 silver badges62 bronze badges

Comments

dippas · Accepted Answer · 2020-07-21 12:12:33Z

0

You can use classList.Add Here's a sample:

btn0.classList.add('btn');
btn0.classList.add('btn-sm');
btn0.classList.add('btn-primary');

edited Jul 21, 2020 at 12:12

dippas

60.8k15 gold badges125 silver badges134 bronze badges

answered Jul 21, 2020 at 11:53

Mostafa Shehata

213 bronze badges

Collectives™ on Stack Overflow

create a button and set its class using javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related