Any easy way to add dynamic elements

[truptidalia]

Hello,

I am new to JS and DHTML. I want to add elements like lable, textbox, button etc on differnt events of the page in a div present in html page.
So, the contents of present div element changes accordingly. At present, I am adding each element in a form & the dynamic form in the div. I am unable to add the form directly, so i have a label in html div & add the form using insertBefore ('dynamicForm', lbl).

 
   <div id="directDIV" class="directDIV" style="width: 273px; position: absolute; height: 550px; background-color:silver; left: 13px; top: 188px;"> 
        <label id="lbl"></label>
    </div>
 

Now, in another event, again i got to create another form & add in the div. But for that I first got to remove all elements from the div, if any. Then add the new created form. But as i am not able to add form directly using appendchild('newform'). And if I delete all elements than the original alble is also deleted & hence can't use insertBefore().

How do i face and solve this situation. By removing and adding or appending elements in the html div on different events.

Any help is highly appreciated. Please help me to solve this problem.

Thanks
Trupti

[gits]

hi ...

can you tell me what's getting wrong when you try to append your form with:

// we assume that elementtoappend is a ref to your form
var desiredelement = document.getElementById('directDIV');
desiredelement.appendChild(elementtoappend);
 

if you want to use insertBefore your label, than you mustn't remove your label with id='lbl' ... so during your remove operation you should ask for the id of the element to be removed and if that id equals 'lbl' don't remove it ...

ps: i'm working on the other problem you had with adding elements a generic/reliable way ... without browserdetection ... you remember it? be patient ... i have a lot to do at the office this week ... weekend will come and a solution too ;)