Question

Since version 1.4 of jQuery; you have been able to create an element using an object literal, defining the elements properties…

$("<div />",
{
    id: "test",
    name: "test",
    class: "test-class"
});

On top of assigning a few properties to an element; I’d like to add some in-line styles. Is this possible, using the object literal?… I’m thingking something along the lines of:

$("<div />",
{
    id: "test",
    name: "test",
    class: "test-class",
    style: {
        width: "100px",
        height: "100px",
        background-color: "#fff"
    }
});

Answer 1

You can pass method names and arguments to the map that will be executed on the object.

$("<div />",
{
    id: "test",
    name: "test",
    class: "test-class",
    css: {
        width: "100px",
        height: "100px",
        backgroundColor: "#fff"
    }
});

From the documentation:

Furthermore, any event type can be passed in, and the following jQuery methods can be called: val, css, html, text, data, width, height, or offset.