ashri Posted August 14, 2012 Share Posted August 14, 2012 Hi All,I am a newbe in javascript but curious to learn javascript. I have made a table using divs by javascript for loop and want to add diffrent content in diffrent divs. for example: first div should contain an image, second one should contain an paragraph, third one should contain a button element etc, but I don't know how this to be done.so please anyone help me to make me aware of this idea. here is my code. <style type="text/css">.parent { width: 1010px; height: auto; border: 1px solid red; margin: 0 auto; clear: both; display: table;}.child{ width: 200px; height: 100px; border: 1px solid blue; text-align: center; display: table-cell;}</style><script type="text/javascript">document.write('<div class="parent">');var x = 0;while (x<10) {document.write('<div class="child"></div>');x++;}document.write('</div>');</script> thanks in advance. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 14, 2012 Share Posted August 14, 2012 You would never use document.write, also you need a reference to add child div elements, I change 'parent' class to id to achieve this, OR you can use index ref of div elements to target specific div element in dom tree as in var target_div = document.getElementsByTagName("div") // gather list of div element target_div[1].appendChild(child_div); // will target 2nd div element found too append child div elements code using by id ref var parent_div = document.createElement("div") parent_div.id="parent" document.body.appendChild(parent_div); var x = 0;while (x<10) { var child_div = document.createElement("div") child_div.className="child"document.getElementById(parent_div.id).appendChild(child_div);x++;} Link to comment Share on other sites More sharing options...
ashri Posted August 14, 2012 Author Share Posted August 14, 2012 thank you to reply dsonesuk I have implemented your given code but result is none. Perhaps I made any mistake because I am new in javascriptplz send me entire page code.thanks again Link to comment Share on other sites More sharing options...
dsonesuk Posted August 14, 2012 Share Posted August 14, 2012 Try this window.onload=function() { var parent_div = document.createElement("div") parent_div.id="parent" document.body.appendChild(parent_div); var x = 0;while (x<10) { var child_div = document.createElement("div") child_div.className="child"document.getElementById(parent_div.id).appendChild(child_div);x++;} } Link to comment Share on other sites More sharing options...
ashri Posted August 14, 2012 Author Share Posted August 14, 2012 display result is the same as when I used document.write and my question is still thirstymy ectual question is:I want to add diffrent content in diffrent divs. for example: first div should contain an image, second one should contain an paragraph, third one should contain a button element etc. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 14, 2012 Share Posted August 14, 2012 (edited) Then you would use the same principle as example to create these elements and insert into required div, but! maybe using the dom tree method as mentioned. The created img tag ref would created then you apply src, alt, title etc createdimgtagref.src="myimg.jpg";createdimgtagref.tite="my image description"; before appending it to specific div target_div[1].appendChild(createdimgtagref); Edited August 14, 2012 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now