Javascript - dynamically change absolute positioning [closed]

Question

I have an HTML page that has a div that is position absolutely. I'm trying to write some Javascript that would dynamically move the div down whenever some data before it is generated. I've been playing with the .css jquery function but it does not appear to be working. Any ideas on how this can be accomplished?

I have the following div that is positioned on my page with the styles below it.

<div id="MyControl">
     <%Html.RenderPartial("MyControl")%>
 </div>

#MyControlControl  {
    position:absolute;
    text-align:left;
    left:100px;
    top:900px;
}

In the main part of my html i'm building a dynamic table with records from a database. Whenever a new row is added I want to call some sort of Javascript to move the div down by 50 px. I've tried both javascript (document.getElementByID gives me an object expected error) and jquery .css function. I can't get either to work.

Answer 1

Grab the position using jQuery and increment it.

var d = $('#mydiv');
// Move down by 50px
d.css({top:d.position().top+50+'px'});