How do I add a class to appended element using Jquery?

Question

How to add 'list-group-item' class while appending an element with jquery?

After appending an <li> to the <ul id="todoList"> , the class property is not working as i expected.

  $("#todoList").append($('<li>', {
    text: $('#todoInput').val(),

    class: $('list-group-item') // this is not working
  }));

Answer 1

You can do:

 $("#todoAddBtn").on("click", function() { $("#todoList").append($('<li>', { text: $('#todoInput').val(), class: 'list-group-item' // <-- Class name should be an string })); $('#todoInput').val(''); // Clear input.. }); 

 .list-group-item { color: blue; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="todoList"></ul> <input id="todoInput"> <button id="todoAddBtn">Add</button> 

Answer 2

When you do class: $('list-group-item') , you're basically creating an object that you add to the class . You just want a string that is the class-name, and not an object. All you need is class: 'list-group-item' .

$("#todoAddBtn").on("click", function() {
  $("#todoList").append($('<li>', {
    text: $('#todoInput').val(),
    class: 'list-group-item'
  }));
});

Answer 3

如果要添加此“list-group-item”，请将其更改为

class: 'list-group-item'