title: jquery styling content in dynamic element
body: <p>I am using the jquery plugin flexslider to display some images and captions. I am using the code below to take captions out of the flexslider content and place into an outside element. </p>
  
  <p>The captions are styled using spans but when they are placed into the new element called ".captions" they are not styled and all text is running together.</p>
  
  <p>How can I apply styling and formatting to the text in the ".captions" div?</p>
  
  <pre><code>    &lt;script type="text/javascript" charset="utf-8"&gt;
      $(window).load(function() {
  
      $captions = $('.captions');
  
      $('.flexslider').flexslider({
          animation: "fade",
          controlNav: "thumbnails",
          directionNav: true,
          slideshow: false,
          useCSS: true,
          touch: true,
          start: function() {
              $activecaption = $('.flex-active-slide .flex-caption');
              $captions.html($activecaption.text());        
          },
          after: function() {
              $activecaption = $('.flex-active-slide .flex-caption');
              $captions.html($activecaption.text());
          }
      }); 
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>For example I am echoing out this: </p>
  
  <pre><code>echo "&lt;span class='artwork-title'&gt;$page-&gt;title&lt;/span&gt;,&lt;span class='artwork-year'&gt;     $artwork-&gt;date&lt;/span&gt;&lt;span class='artwork-year'&gt;$artwork-&gt;dimensions&lt;/span&gt;";
  </code></pre>
  
  <p>and my jquery seems to be getting rid of the span tags.</p>