how to add content in "for loop" using created elements

[ashri]

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.

[dsonesuk]

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++;}

[ashri]

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

[dsonesuk]

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++;}    }

[ashri]

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.

[dsonesuk]

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