jquery repetitive element creation
<p>Which of the following is better?<br>
1) Create the element on each loop</p>

<pre><code>$(obj).children('option').each(function(){
  var item = $('&lt;div /&gt;')
    .html($(this).text())
    .append(plus)
    .addClass('ui-widget-content ui-state-default')
    .hover(
      function(){$(this).addClass('ui-state-hover')}, 
      function(){$(this).removeClass('ui-state-hover');}
    );
    $(list).append(item);
});
</code></pre>

<p><hr />
2)Create the element, only change it's html on each loop<br>
<strong>Note: This does not work, It requires <code>.clone()</code> as below.</strong></p>

<pre><code>var item = $('&lt;div /&gt;')
  .addClass('ui-widget-content ui-state-default')
  .hover(
    function(){$(this).addClass('ui-state-hover')}, 
    function(){$(this).removeClass('ui-state-hover');});

$(obj).children('option').each(function(){
  $(item).html($(this).text()).append(plus);  
  $(list).append(item);
});
</code></pre>

<p><hr /><strong>Update:</strong><br />
So, after reviewing all the answers/comments here is the final function.
Any more  improvements?</p>

<pre><code>function create_list(obj) {
  var list = $('&lt;div /&gt;')
    .attr('id','keyword_unselect').addClass('ui-widget')
    .delegate("div", "mouseenter mouseleave", function() {
      $(this).toggleClass('ui-state-hover');
    });

  var plus = $('&lt;div /&gt;').addClass('ui-icon-plus');

  var item = $('&lt;div /&gt;')
    .append(plus)
    .addClass('ui-widget-content ui-state-default');

  $(obj).children('option').each(function(){    
    item.clone(true)
      .prepend(this.text)
      .appendTo(list);
  });
  return list;
};
</code></pre>
