javascript - Get height of dynamically created element - Stack Overflow

I created one div dynamically and tried to get its height. I didn't assign fixed height to it. But its content is assigned a fixed height. So I tried to get its render height.

$(function(){
    $services = $(<div id="services"></div>);
    $img  = $(<img src="abc.jpg" height="100px" width="100px">);
    $a = $("<a href="home.php">Go to home</a>");
    $services.append($img,$a);
});

$(function(){
    var height = $("#services").height();
});

I got value of height as 0.

So I can't render height of div#services.

I created one div dynamically and tried to get its height. I didn't assign fixed height to it. But its content is assigned a fixed height. So I tried to get its render height.

$(function(){
    $services = $(<div id="services"></div>);
    $img  = $(<img src="abc.jpg" height="100px" width="100px">);
    $a = $("<a href="home.php">Go to home</a>");
    $services.append($img,$a);
});

$(function(){
    var height = $("#services").height();
});

I got value of height as 0.

So I can't render height of div#services.

• javascript
• jquery

Share Improve this question Follow edited Nov 30, 2012 at 7:04 Ted Hopp 235k4848 gold badges411411 silver badges532532 bronze badges asked Nov 30, 2012 at 6:59 john markerjohn marker 4111 silver badge88 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You need to add the element to the DOM before measuring it:

$('body').append($services);
var height = $("#services").height(); // works now

If you need its height before making it visible, a mon trick is to add it to the DOM hidden, measure it, and then make it visible.

You should show those Dom Elements to Page first!

in your case, $services is not shown to the Page, so the result $("#services") will get nothing.

try to do this:

$(function(){
    $services = $(<div id="services"></div>);
    $img  = $(<img src="abc.jpg" height="100px" width="100px">);
    $a = $("<a href="home.php">Go to home</a>");
    $services.append($img,$a);

    //here
    $("body").append($services);
});

it will works.