Creating a div element in jQuery

Generate a div with style and behavior

Being stylish and interactive counts, even for a div:

$('<div>', {
    id: 'awesomeDiv',  // Who's awesome? Yes, you are!
    class: 'stylishClass', 
    click: function() { alert('You just poked me!'); } // Gotcha!
}).appendTo('#desiredLocation');


This snippet carves a div, baptizes it 'awesomeDiv' with a 'stylishClass' and gets it ready to play peek-a-boo with an alert!

Add multiple classes at once

Transform your div into a social butterfly; wear multiple classes at once:

$('<div>').addClass('classy elegant stylish').appendTo('body');


Get this fancy div ready for the DOM-coming party!

Bring interactivity and animations to life

Hit the stage right with interactive elements and theatrical animations:

$('<div>').hide().slideDown(1000).appendTo('body').on('click', function() {
    $(this).slideUp(1000, function() {
        $(this).remove();
    });
});


Here, the div is coy, teases a grand entrance, and takes a final bow with a flourish!

Managing sophisticated elements

For complex div management, consider leveraging a loading indicator:

var $loadingDiv = $('<div>', {
    id: 'loadingDiv', 
    class: 'loading-indicator',
    text: 'Please wait, loading...'
}).hide().appendTo('body').fadeIn(500);


Run the show behind the curtain until it's time to lift it!

Efficient method chaining

Write poetry with method chaining. Craft concise and eloquent jQuery lines:

$('<div>').hide().addClass('new-class').fadeIn(500).appendTo('#container');


Posture! Elegance! Grace! A chained div pirouettes effortlessly.