How to add many <row> components in ZK in specific position - zk

Question

I'm working in a ZK application and I need to add <row>'s components based on user input. The zul is like this:
<grid id="mygrid">
<rows id="rows">
<row>
<cell>
<label value="Rows to add 1:"/>
</cell>
<cell>
<textbox id="txt_addRows1"/>
</cell>
</row>
<!-- Here I need to add rows specified in txt_addRows1 -->
<row>
<cell>
<label value="Rows to add 2:"/>
</cell>
<cell>
<textbox id="txt_addRows2"/>
</cell>
</row>
<!-- Here I need to add rows specified in txt_addRows2 -->
<row align="right">
<cell colspan="2">
<button id="btn_generate" label="Generate"/>
</cell>
</row>
</rows>
</grid>
In the composer I can do something like:
Row someRow = new Row();
row.setParent(rows);
My question is: how do I specify that the new row (generated programmatically in the composer) to be rendered in the specified places and not others?
Any suggestion/guide is also welcomed. Thanks in advance for your answers.

Answer 1

There are 2 ways to insert something in the DOM.
First way is to set the parent, the second one is adding a child.
If you check the AbstractComponent api. you see they also speak of appendChild and insertBefore(Component newChild, Component refChild)
So the code would look like :
rows.insertBefore(newRow,rowWhatComesAfterYourRow);