using javascript function to render HTML

Question

I have a static page that has login and registration link.I want that when a user clicks on Login,it calls a Javascript function that in turn displays the Login Form on the same page.

Although I can embed the whole HTML tag in document.write() but that is very messy and am sure is not the best practice for long HTML codes.

So how can i embed HTML codes into the JS function?and how do i control the positioning of the form on the page.

I am looking for a Javascript solution only and not JQuery

Answer 1

html = "<form>....</form>";

document.getElementById("example").innerHTML = html;

Answer 2

Try to make a div containing your elements for the registration So for HTML you can use something like this

<div id="regElements" style="display:none;" class="registration" >Elements for a registration form</div>
<input type="button" name="re" onclick="showReg()" />

And for Javascript you just use ths function

function showReg() {
    document.getElementById("regElements").style.display = "";
}

You can find examples of this code everywhere! Good luck!