Jump to content
ashri

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

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by dsonesuk

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...