What is the most effecient way to update multiple divs with jQuery
<p>I'm using html5 data attributes to store information about record and create a preview on hover.  I'm currently doing the code below but it gets a little sluggish at times.  It works, but I'm still learning and know this cant be the best way.</p>

<pre><code>function showfileinfo() {
    var filetags = $(this).attr('data-filetags');
    var tags ='';

    if(filetags.length &gt; 0) {
        $.each(filetags.split(','), function(index, item) {
            tags += '&lt;div&gt;' + item + '&lt;/div&gt;';
        });
    }

    $('.tags').html('&lt;div class="tag-image"&gt;&lt;img src="/_ima/tag.png"/&gt; tags&lt;/div&gt;' + tags);
    $('#file-preview &gt; h3:first').html($(this).attr('data-filetitle'));
    $('.file-name').html($(this).attr('data-filename') + ' - ' + humanize_filesize($(this).attr('data-filesize')));
    $('.description').html($(this).attr('data-filetext'));
    $('#file-preview').hide().fadeIn();

}
</code></pre>

<p>I'm updating this preview div.</p>

<pre><code>&lt;div id="file-preview" style="display:none;"&gt;
    &lt;h3&gt;Document Title&lt;/h3&gt;
    &lt;p class="file-name"&gt;acrobat.pdf - 4.06 MB&lt;/p&gt;
    &lt;p class="description"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet arcu nec tortor porttitor laoreet sollicitudin odio vestibulum&lt;/p&gt;
    &lt;div class="tags"&gt;
        &lt;div class="tag-image"&gt;&lt;img src="/_ima/tag.png"/&gt; tags&lt;/div&gt;
        &lt;div&gt;wireframe&lt;/div&gt;
        &lt;div&gt;visio&lt;/div&gt;
        &lt;div&gt;workflow&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
