Jump to content
dev

Create div dynamically

Recommended Posts

Dear sir, I was trying to create a div element dynamically on top of another div(existing div) with javascript. I end up using these code: ------------- function createDiv(){var divTag = document.createElement("div");divTag.id = "div1";divTag.setAttribute("align","center");divTag.style.border = "1px solid #ccc";divTag.innerHTML = Date();document.getElementById("ht").appendChild(divTag);}--------------but this code creates div not on top but beneath. Kindly correct my code so that it will create div not beneath but on top.Your help is highly obliged.

Share this post


Link to post
Share on other sites

If the existing div is a child of ht element, then do this:

par=document.getElementById('ht'); //access ht.par.insertBefore(divTag,par.firstChild) //insert divTag before the first child of the parent element (ht).

EDIT:NB: note that "align" attribute is deprecated and CSS text-align (

setAttribute('style','text-align:center')

) should be used instead!

Edited by eTianbun

Share this post


Link to post
Share on other sites

Sir one more problem, kindly get me work the function cl(); here am attaching the code: ---------------- <html><head> <title>Javascript Create Div Element Dynamically</title> <style type="text/css"> .dynamicDiv { width:200px; height:100px; border:solid 1px #c0c0c0; background-color:#e1e1e1; font-size:11px; font-family:verdana; color:#000; padding:5px; }#ht{border:1px solid red;padding:6px} </style> <script type="text/javascript" language="javascript">var myText="<table><tr><td>

<div onclick=\'cl();\'>Close this div<\/div>
<\/td><\/tr><tr><td>some text<\/td><\/tr><\/table>" function cl(){
//how can i close the div i have just created with createDiv() function.
} function createDiv(){var did="";var possible="abcdefghijklmnopqrstuvwxyz";for( var i=0; i < 4; i++ ){did +=possible.charAt(Math.floor(Math.random() * possible.length));}var divTag = document.createElement("div");divTag.id = did;divTag.className = 'setm';divTag.setAttribute('style','text-align:center')divTag.style.border = "1px solid #ccc";divTag.innerHTML = myText;par=document.getElementById('ht');par.insertBefore(divTag,par.firstChild)}</script></head><body><input id="btn1" type="button" value="create div" onclick="createDiv();" /> <div id="ht"></div> </body></html>---------------

Share this post


Link to post
Share on other sites

can't you just post the entire thing in code tags and just add comments to the problem areas? That's really hard to read. And what do you mean by close the div? Do you mean hide it? Do you want it start out hidden? Or have some way of toggling it? Please be specific as to what you are trying to accomplish.

Share this post


Link to post
Share on other sites

Sorry for the confusion. yes i want to hide (css property - display:none) a div that i have created with function createDiv(); Actually i want to incorporate this functionality in user comment section. as users post their comments, this java functionality will show their post through ajax. so i want to keep the option to delete the post too by css property display:none and i will call a remote page to actually delete the post through ajax. thats why i wish to call a function through onclick event but am confused. please help.

Share this post


Link to post
Share on other sites

Create another function to do that!

 function delPost(elem){if(confirm('Do you realy want to delete this post?')){ /*if user clicked ok: */document.getElementById(elem.id).style.display='none'}}//Call it likeonclick="delPost(This)" 

Edited by eTianbun

Share this post


Link to post
Share on other sites

document.getElementById(elem.id)This is redundant. If elem is already a reference to an element, why would want to waste resources finding its id to get a reference to the same element again? Just use elem.Also, delPost(This) should be delPost(this) If want to actually remove the div instead of just hiding it, you can use the removeChild function:elem.parentNode.removeChild(elem);

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...