Question

context: I have an ajax request which return data structure with an html key.

I would like to wrap this data with a jQuery object to be able to use API like width / height and modify the data before adding it to the DOM.

> $('<div width="220" height="200"></div>').width()
0

So how could I do to get 220 and then modify it ?

I’m using jquery 1.7.2

Edit:

I’m not from the 90’s because I use the wrong tag in my example. My need is to change width and height of an iframe for responsive:

> $('<iframe width="220" height="200"></iframe>').width()
0

Answer 1

Elements have no width before they’re added to the DOM.

A solution, if you really need to not have it in the DOM, is to add it and then detach it :

var d = $('<div width="220" height="200"></div>');
d.appendTo(document.body);
var w = d.width();
d.detach();

As the screen isn’t redrawn until your script ends its task, this operation won’t be seen by the user.

But note that without a different style, this won’t give you 220. You probably want this :

$('<div style="width:220px;height:200px;"></div>');

Demonstration