title: Generate dinamically a <ul> <li> listing from a input array in jQuery
body: <p>My web app has the following tree view in order to show some files and files.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul {
    list-style-type: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" /&gt;
  
  &lt;ul id="myTreeSelector"&gt;
    &lt;li&gt;
      &lt;span class="caret folder-selector"&gt;&lt;i class="fa fa-folder"&gt;&lt;/i&gt; first_folder&lt;/span&gt;
      &lt;ul class="nested"&gt;
        &lt;li class="file"&gt;&lt;i class="fa fa-file"&gt;&lt;/i&gt; app1.dat&lt;/li&gt;
        &lt;li class="file"&gt;&lt;i class="fa fa-file"&gt;&lt;/i&gt; app2.dat&lt;/li&gt;
        &lt;li&gt;
          &lt;span class="caret folder-selector"&gt;&lt;i class="fa fa-folder"&gt;&lt;/i&gt; second_folder&lt;/span&gt;
          &lt;ul class="nested"&gt;
            &lt;li class="file"&gt;&lt;i class="fa fa-file"&gt;&lt;/i&gt; ret.dat&lt;/li&gt;
            &lt;li&gt;&lt;span class="caret folder-selector"&gt;&lt;i class="fa fa-folder"&gt;&lt;/i&gt; third_folder&lt;/span&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>This is just an static example, I want to create this folder dinamically from an input array using jQuery.</p>
  <p>Following the example above (and adding one last element as <em>new empty directory</em>), my input array is as follows:</p>
  <pre><code>arrayOfFiles= [&quot;/first_folder/app1.dat&quot;,&quot;/first_folder/app2.dat&quot;,&quot;/first_folder/second_folder/ret.dat&quot;, &quot;/first_folder/second_folder/third_folder&quot;]
  </code></pre>
  <p>How can I, using jQuery, iterate that array and create the proper folder structure? This is my try so far, I know I can use <code>appendTo</code> to add content to the HTML, but it's so hard for me to manage the file-folder stuff.</p>
  <pre><code>general_ul = $(&quot;#myTreeSelector&quot;)
  general_li = $('&lt;/li&gt;').appendTo(general_ul);
  arrayOfPaths.forEach( function(pathOrFile) {
      var li = $('&lt;li/&gt;')
          .html('&lt;span class=&quot;caret folder-selector&quot;&gt;&lt;i class=&quot;fa fa-folder&quot;&gt;&lt;/i&gt; first_folder&lt;/span&gt;')
          .appendTo(general_li);
  });
  </code></pre>
  <p>Thanks in advance.</p>