Question

In jQuery you can create new elements and define properties on them in one step:

$("<div>", {title: "Hey there!", text: "I'm a DIV!"});

This produces:

<div title="Hey there!">I'm a DIV!</div>

Is there a way to do the same with an existing element? The following does not work:

$("#theDiv", {title: "Hey there!", text: "I'm a DIV!"});

Answer 1

Turns out things are rather easy. jQuery uses .attr() for this.

$("#theDiv").attr({title: "Hey there!", text: "I'm a DIV!"}, true);

Note the second parameter set to true. This causes jQuery to use the same mechanism that it uses for freshly created elements.

Even function parameters work as expected:

$("#theDiv").attr({
    title: "Hey there!", 
    text: function () { return "some calculated value"; }
}, true);​

(See this jsFiddle.)

Consequently, this will also work for event bindings, CSS modifications and all the other things jQuery can do:

$("#theDiv").attr({
    title: "Hi there", 
    text: function (i, v) { return v.replace(/not /, ""); },
    mouseover: function () { $(this).css({color: "red"}) },
    mouseout: function () { $(this).css({color: ""}) },
    css: { fontSize: "20pt", fontStyle: "italic" }
}, true);​

(See this jsFiddle.)

This is undocumented, so it could change in any dot release without being listed in the release notes, but it seems unlikely to and it’s easy to test it when upgrading jQuery.