Create DIV and some other DIV's inside it using onClick event

[bsewell]

Hi, I'm wondering how to create a DIV dynamically. Basicly, I have two labels, and depending on which one is clicked, I want some code to appear inside an existing DIV. Obviously, I will need to do this using javascript and the onClick event. To make things even more complicated, I also want some DIV's inside of the dynamically created DIV.

So, the structure would be:
-Existing DIV
--DIV created by label being clicked
---Another DIV
---Another DIV

I hope this doesn't confuse anyone. I have some code for the existing DIV.

<DIV ID="container"><DIV ID="title">Order</DIV><DIV ID="body">Login <LABEL onclick="login()">here</LABEL>. Signup <LABEL onclick="sign_now()">here</LABEL></DIV>
</DIV>

Could someone help on this?

[me655321]

Easiest way is with CreateElement and innerHTML...

var el = document.createElement('div');
	el.innerHTML = "whatever you want";
	document.getElementById('container').appendChild(el);

Or you'll have to insertBefore if you want to specify where the div gets added.

[bsewell]

Easiest way is with CreateElement and innerHTML...

var el = document.createElement('div');
	el.innerHTML = "whatever you want";
	document.getElementById('container').appendChild(el);

Or you'll have to insertBefore if you want to specify where the div gets added.

Just a quick question to follow on. How do I specify the div id for the newly created div? :)

[bsewell]

Just a quick question to follow on. How do I specify the div id for the newly created div? :)

Just found this, http://www.zytrax.com/tech/dom/createelement.html

I've now got my div being created but it's making my page messy now . It is pushing my copyright notice div to the right :(

Here's my full code:

<div id="menu">
  <?php 
	create_menu();
	?>
</div>
<div id="copyright">
  <?php copyright(); ?>
</div>
<div id="container">
  <div id="title">Order</div>
  <div id="body">
    <div id="content">
      <p>If you have already signed up, then click here, otherwise please fill in our signup form by clicking
        <label onclick="signup()" style="cursor:pointer">here</label>
        .</p>
    </div>
  </div>
</div>

Any ideas what to do?

[me655321]

It would help if you would post the javascript function you're using now to create the div.

[Ganeshcse]

I also have same doubt, but small midification that I have one div that is designed it needs to display every time I click on some div say for example I have one div with Customer Details like Name Gender DOB and it has a list of Address and Contacts so I have kept one address details in one div. and when I require I will show that address div.

Every thing is fine till now, but when I want to show div more than once using Javascript How can I do this I want to simple show that div below my link.

Please do respond to this query.

Thanks
Ganesh