# How to add forms dynamically in javascript?

Example speaks for it self:

function writeSpecialTabContentForTtm(){
document.write('<div style="float:right;width:250px;min-height:200px;display:block;border-width: 1px 1px 1px">');
document.write('<form  id="ttmsetpointrun" action="" style="text-align:right">');
document.write('<input style="float:bottom;" type="submit" value="Move to Set Point" />');
document.write('</form>');
document.write('</div>');


How this should be done? There is a form that is chosen by user. To be precise, user choses a tab and when creating a tab the above function is called. This is something that is changed frequently, so it would be nice to write it in a separate file.

edit:

so, in my case it would be:

var newdiv = document.createElement('div');
newdiv.style = "float:right;width:250px;min-height:200px;display:block;border-width: 1px 1px 1px";
document.body.appendChild(newdiv);

var newform = document.createElement('form');
newform.id = "ttmsetpointrun";
newform.action="";
newform.style="text-align:right";
newdiv.appendChild(newform);

var newinput = document.createElement('input');
newinput.style = "float:bottom;";
newinput.type = "submit";
newinput.value = "Move to Set Point";
newform.appendChild(newinput);


To create dynamic forms and elements in javascript is easy.

var newdiv = document.createElement('div'); // Creates the div
document.body.appendChild(newdiv);          // Adds the div to body


After that, you can access newdiv and change attributes of it, such as

newdiv.className = "helloworld";

• Can you use createElement in a nested way (see my edit above)? I mean, if I want to put "form" into "div", I just call newdiv.createElement('form')? Or is it document.body.newdiv.appendChild(newform)? – Juha Mar 29 '12 at 16:26
• When creating elements, you use document.createElement(), this doesn't add the element to the web page. Then you will want to call newdiv.appendChild(theformyoucreated); – David Mar 29 '12 at 16:32
• Ok, thanks. It almost works... is there "getCurrentChild" function? The first document.body.appendChild goes outside the current element. And my function does not know the current element (which is a child of body). – Juha Mar 29 '12 at 17:14
• Not exactly sure what elements you are trying to get, but getElementsByTagName() might be useful. Or look into jQuery. – David Mar 29 '12 at 17:29
• hmm, ok. There seems to be some problems that are related to the document.write. I am not sure in which order these are evaluated... The parent div (tab) that should contain the child div (form container) does not exists because I haven't written </div> to the document when I am appending it. So I have to change all document.write commands to use this appendChild for this to work... anyway now I know how to get it to work. – Juha Mar 29 '12 at 17:50

Why are you "adding" the form dynamically like this in the first place?

IMHO you shouldn't be generating the HTML neither with document.write nor document.createElement in this case, since the actual form seems to be static.

<form id="ttmsetpointrun">
<input type="submit" value="Move to Set Point" />
</form>


but hide it in your CSS:

#ttmsetpointrun { display: none }


and then display it with JavaScript when the user clicks in the tab

<a href="#" onclick="document.getElementById('ttmsetpointrun').style.display = 'block'">Link</a>


If you want the form to be in a separate file, then include it using a server-side script (e.g. PHP).

Finally remember to use an external style sheet. If you put your styles into the HTML you are doing something wrong.

• When the code was written for the first time, it was all static html. Then I modified that common tab content is parsed from xml file by javascript. This specialTabContent was just a quick hack that I am now fixing. The page is actually 90% javascript, and now I think I will get rid of the last of the html lines from the body. – Juha Mar 30 '12 at 22:43
• @Juha Hmm, "Getting rid" of HTML sounds like a strange (and wrong) thing to do for a web page. Why would you want to do that? What is your scenario? – RoToRa Apr 2 '12 at 10:13
• This is not a web page ;). Well, technically it is, as all the interpreters require the html etc. tags at the beginning. This is an UI for measurement devices. The other components catch the http-post commands in JSON form. Also it is very portable to any kind of device: smartphone, pc, mac, tablet... – Juha Apr 3 '12 at 8:46