Question

I want to add DIV tags with attributes within a selected element. I understand that the normal way of inserting HTML content according to the jQuery website is to:

$('#selected_element').append('<DIV id=' + A + '>{HTML CONTENT}</DIV>');

However, I also need to add mouse events on the DIV tags at the same time. I note that there is a way that looks like this:

$('#selected_element').append($('<DIV>', {
 mouseover: function(){alert('mouseover');},
 mouseout: function(){alert('mouseout');}
}));

How do I combine the two methods to add both content and attributes?

Answer 1

var $div = $('<div>{content}</div>').attr('attrName', 'attrVal').hover(
  function() {
    alert('mouseover');
  },
  function() {
    alert('mouseout');
  }
);

$('#selected_element').append($div);