li text doesn't appear when I add class

Question

I am trying to add a li element to a ul.

Code for ul:

<ul id="issueUserList" class="list-group"></ul>

When I add a li without a class something like this:

function () {
   var $issueUserList = $("#issueUserList");
   $('<li></li>',
            {
                text: $("#formEmail :selected").text()
            })
            .appendTo($issueUserList);
});

This works fine, but when i add a class at li something like:

<li class="list-group-item"></li>

The text no longer appears

Answer 1

You need to use class property.Please try this:

 var $issueUserList = $("#issueUserList");
 $('<li></li>',
 {
      class:"list-group-item",
      text: $("#formEmail :selected").text()
 })
 .appendTo($issueUserList);

$('button').click(function(){
 var $issueUserList = $("#issueUserList");
            $('<li></li>',
            {
                class:"list-group-item",
                text: $("#formEmail :selected").text()
            })
            .appendTo($issueUserList);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="issueUserList" class="list-group"></ul>
<select id="formEmail">
  <option>1</option>
  <option>2</option>
</select>
<button>Click</button>