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?

Recommended Answers

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.

Jump to Post

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

Jump to Post

All 5 Replies

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.

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? :)

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?

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

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.20 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.