How to add forms dynamically in javascript?

Question

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);

Answer 1

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";

Answer 2

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.

Instead just add the form normally in your HTML

<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.