dev Posted February 29, 2012 Share Posted February 29, 2012 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 More sharing options...
eTianbun Posted February 29, 2012 Share Posted February 29, 2012 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! Link to comment Share on other sites More sharing options...
dev Posted February 29, 2012 Author Share Posted February 29, 2012 eTianbun :-)Thank you so much :-) its working perfectly. Link to comment Share on other sites More sharing options...
dev Posted February 29, 2012 Author Share Posted February 29, 2012 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 More sharing options...
thescientist Posted February 29, 2012 Share Posted February 29, 2012 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 More sharing options...
dev Posted March 1, 2012 Author Share Posted March 1, 2012 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 More sharing options...
eTianbun Posted March 1, 2012 Share Posted March 1, 2012 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)" Link to comment Share on other sites More sharing options...
ShadowMage Posted March 2, 2012 Share Posted March 2, 2012 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.