title: How to dynamically create <li> with JavaScript?
body: <p>Please check the below JavaScript code</p>
  
  <pre><code>&lt;script&gt;
              function dynamicMessageLoader(id) {
  
                  $.get("SentMessagesDynamicLoaderServlet?idMessageGroup=" + id, function (responseJson) {
  
                      $('#li_list').empty();
                      var array = [];
  
                      $.each(responseJson, function (index, item)
  
                      {
                          array[index] = item;
                      });
  
                      $('#message_count').empty();
  
                      var readArray = array.length;
  
                      var count = readArray + " Messages Selected";
  
                      $('&lt;p /&gt;', {html: count}).appendTo('#message_count');
  
                      for (var i = 0; i &lt; readArray; i++) {
  
                          $('&lt;li /&gt;', {html: array[i][0]}).appendTo('#li_list');
  
                      }
                  });
              }
    &lt;/script&gt;
  </code></pre>
  
  <p>Then some HTML</p>
  
  <pre><code>&lt;ul id="li_list"&gt;&lt;/ul&gt;
  </code></pre>
  
  <p>In my JavaScript code, consider this section -</p>
  
  <pre><code> `$('&lt;li /&gt;', {html: array[i][0]}).appendTo('#li_list');`
  </code></pre>
  
  <p>What I want is not to just create a <code>&lt;li&gt;</code> but with its remaining attributes, exactly like below</p>
  
  <pre><code>&lt;li class='clickable-row hand' id="3" &gt;Text here&lt;/li&gt;
  </code></pre>
  
  <p>In my array, <code>array[i][0]</code> contains the ID and <code>array[i][1]</code> contains a text. How can I achieve this?</p>