Jump to content

Create div dynamically


dev
 Share

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.

Link to comment
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
Link to comment
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>---------------
Link to comment
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.

Link to comment
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.

Link to comment
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
Link to comment
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);

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...