jquery repetitive element creation

Question

Which of the following is better?
1) Create the element on each loop

$(obj).children('option').each(function(){
  var item = $('<div />')
    .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);
});

---

2)Create the element, only change it's html on each loop
Note: This does not work, It requires .clone() as below.

var item = $('<div />')
  .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);
});

---

Update:
So, after reviewing all the answers/comments here is the final function. Any more improvements?

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

  var plus = $('<div />').addClass('ui-icon-plus');

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

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

Answer 1

The first in this case, though the second would be better, but it currently has a different effect (the element moves each time).

Create it once and .clone() it for appending, like this:

 var item = $('<div />', { 'class': 'ui-widget-content ui-state-default' })
                  .hover(function(){$(this).addClass('ui-state-hover')}, 
                         function(){$(this).removeClass('ui-state-hover');});

$(obj).children('option').each(function(){
  $(list).append(item.clone(true).html(this.text).append(plus));
});

You can give it a try here.

I'm using the .text property of the <option> directly to save a few CPU cycles as well, just reverse this if you need to encode the content for some reason.

---

Or a bit more efficient version using .delegate() to only bind those mouseneter and mouseleave events once:

$(list).delegate("div", "mouseenter mouseleave", function() {
    $(this).toggleClass('ui-state-hover');
});

var item = $('<div />', { 'class': 'ui-widget-content ui-state-default' });    
$(obj).children('option').each(function(){
  $(list).append(item.clone().html(this.text).append(plus));
});

You can give it a try here.

Answer 2

By virtue of the fact that you're doing less in the second version, I'd say it's safe to say that the second one will be more efficient.

Although I think you're going to need to .clone() the item in order to ensure that you're working with a new copy.

Also, you could add the plus to the original, then .prepend() the text.

Finally, you can use .appendTo() instead of .append() when appending it to list.

var item = $('<div />')
  .addClass('ui-widget-content ui-state-default')
  .append(plus)
  .hover(
    function(){$(this).addClass('ui-state-hover')}, 
    function(){$(this).removeClass('ui-state-hover');});

$(obj).children('option').each(function(){
  item.clone(true)
      .prepend( $.text([this]) )
      .appendTo(list);  
});