Question

My div structure should be this:

<div id="dashboard">
    <img id="pic1" src="...png" />
    <h6>....</h6>       
</div>

To create the div I use this:

$('<div>', {
    'id': 'dashboard'
}).appendTo('body');

I need to append a h6 tag with text into the above div. How can this be done? Also how can I access the text within the h6 tag when the div is clicked?

$('#dashboard div').hover(function() {
    alert($(this).children().eq(2)  ??  );
};

Answer 1

To add the h6 element, try this:

var $div = $('<div>', {
    'id':'dashboard'
}).appendTo('body');

$("<h6></h6>").text("Foo").appendTo($div);

To access the text of the h6 on click of the div, try this:

$("body").delegate("#dashboard", "click", function() { 
    var text = $("h6", this).text();
    alert(text);
});

That assumes you are using jQuery 1.6 or lower. If you are using jQuery 1.7+, you can use on():

$("body").on("click", "#dashboard", function() { 
    var text = $("h6", this).text();
    alert(text);
});

Example fiddle

Also, I have used $("body") here as an example – you should use a selector which is the closest to the element you are attaching the event to (in this case #dashboard) which is not dynamically created.