如何使用Jquery将类添加到追加的元素？

Question

如何在使用jquery添加元素时添加 "list-group-item" 类？

在将 <li> 追加到 <ul id="todoList"> 后，类属性无法按预期起作用。

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

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

- Max Pauwels

---

将 class: $('list-group-item') 替换为 class: 'list-group-item'。使用 $() 是一个选择器。 - NewToJS

我们应该将类名作为 class: 'list-group-item' 传递。 $() 将返回 jQuery 对象。 - Ramki

Answer 1

你可以做：

$("#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>

- Yosvel Quintero

Answer 2

当你执行 class: $('list-group-item') 时，你基本上是在创建一个对象，然后将其添加到 class 中。你只需要一个字符串作为类名，而不是一个对象。你所需要的只是 class: 'list-group-item'。

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

- Qirel

Answer 3

如果你想添加这个“list-group-item”，那么把它改成

class: 'list-group-item'

- Ali Karaca