Using javascript need to add a row dynamically on click of a button

[jiggy]

The scenario is :
When the user clicks on the Add Button a row should get added to the table dynamically.But i need this table to be created at a specific position in the form (as shown in bold below form structure):

I have two functions out of which, in one i am creating my html elements using javascript and in the other i am handling my button events.
The thing is as shown below:

function createHtml(){


      1. TextField
      2. Add Button1
     3.Dynamic table to be created on the click of Add Button1
      4.Add button2
      5.Dynamic table to be created on the click of Add Button2

}

function handleEvents(e){

        eventHandling code.
}

Now as shown in the above function when the user clicks on Add Button1 i want a row to be get added at the Postion3.And this is to be done everytime the button is clicked at that specific postion only.

Can anybody please help me in achieving this task.

[pshah]

Not sure how much detail you're asking for, so here's the basics...

Assuming you have a reference to the TABLE element, all you would need to do is call "insertRow" on the TABLE and pass in an index value of where in the table you want to insert. Passing in "-1" will append to the end of the table.

To tie everything together, add an onclick handler to each of the buttons. In the handler code, either get a reference to the TABLE if it exists via an ID or create one by calling document.createElement("TABLE").

HTH.