title: How to count number of <li> from a specific <ul>?
body: <p>I tried to count all append list <code>li</code> of the specific <code>ul</code> but it will count <code>0</code> when I console it.</p>
  
  <p>I try to put this code:</p>
  
  <pre><code>count = $('#notif-list').children("li").length;
  console.log(count);
  </code></pre>
  
  <p>and here is my full code:</p>
  
  <pre><code>$(document).ready(function() {    
  
  notif();
  
  count = $('#notif-list').children("li").length;
  console.log(count);
  $('#countnotif').append('Notifications'+ '&lt;span&gt;'+ count     +'&lt;/span&gt;');
  
  
  var socket = io('http://www.iaccs-admin-console.test' + ':8080');
  socket.on("message", function(message){
  
      notif()
  
  });
  </code></pre>
  
  <p>The result should be like this.. if there are four <code>li</code> then <code>count = 4</code>.</p>
  
  <p>This is the code where I append the list.</p>
  
  <pre><code>function notif(){
  
      $.ajax({
          url: `/iaccs-hook-notifications`,
          method: 'GET',
          success: function(data){
  
              console.log(data);          
  
  
              if (data.length &gt; 0) {
  
                  $('#btn-notif').addClass('js-has-new-notification'); 
  
  
                  $('#notif-list').append(`
  
                      &lt;li&gt;
  
                          &lt;div class="an-info-single unread"&gt;
                              &lt;a href="{{url('iaccs-hook-list')}}"&gt;
                                  &lt;span class="icon-container important"&gt;
                                      &lt;i class="icon-setting"&gt;&lt;/i&gt;
                                  &lt;/span&gt;
                                  &lt;div class="info-content"&gt;
                                      &lt;h5 class="user-name"&gt;Update Client&lt;/h5&gt;
                                      &lt;p class="content"&gt;&lt;i class="icon-clock"&gt;&lt;/i&gt; ${data[0].created_at}&lt;/p&gt;
                                  &lt;/div&gt;
                              &lt;/a&gt;
                          &lt;/div&gt;
  
                      &lt;/li&gt;
                  `);
  
              }
  
          },
          error: function(err){
              swal('Error!','Please report this issue.', 'error');
          }
      });
  }
  </code></pre>