title: jQuery read from text file in my web folder and append to div
body: <p>I'm trying to read values ("img1.jpg", etc.) from a text file on my server and append to a div to create a slide show.  </p>
  
  <p>The only catch is I need the first "slide" to have a class of <strong>.active</strong> applied.  </p>
  
  <p>Here's how my text file reads:</p>
  
  <p><img src="https://i.stack.imgur.com/WWr6R.png" alt="enter image description here"> </p>
  
  <p>Here's the div I want to append to looks like:</p>
  
  <pre><code> &lt;div class="carousel-inner"&gt;
     &lt;!-- slide --&gt;
       &lt;div class="active item slide3 animated fadeInUpBig"&gt;
          &lt;img src="img1.jpg" /&gt;
       &lt;/div&gt;
     &lt;!-- slide --&gt;
       &lt;div class="item slide3 animated fadeInUpBig"&gt;
          &lt;img src="img2.jpg" /&gt;
       &lt;/div&gt;                           
   &lt;/div&gt;
  </code></pre>
  
  <p>Here's what I tried:</p>
  
  <pre><code>$(function () {
  var file = "gallery.txt"; // gallery.txt PATH
  
  $('&lt;div /&gt;'.load(file, function(data){ // dummy DIV to hold data 
      var line      = data.split('\n');
      var NofImages = line.length -1;        
      for( i=0; i &lt; NofImages; i++ ){
          image = './cms/data/img/gallery/homepage/'+ line[i].split('|')[2];
          $(".carousel-inner").append("&lt;div class='active item slide3 animated fadeInUpBig'&gt;&lt;img src='+ image +' /&gt;&lt;/div&gt;");
      }   
  }
  
  });
  </code></pre>