hello all, i thought not to paste my code...only to paste the exact part in whick i need help.. i am very confused...read comments to understand what exactly i want to do... i want to create with innerhtml a input text and a button...and with that button to create also with innerhtml another element, for example an input textarea.. please help its very important for me... <script> function addfield() { var ni = document.getElementById('myDiv'); var numi = document.getElementById('theValue'); var num = (document.getElementById("theValue").value -1)+ 2; numi.value = num; var divIdName = "my"+num+"Div"; var newdiv = document.createElement('div'); newdiv.setAttribute("id",divIdName); newdiv.innerHTML = "<input type=\"text\" name=\"firstname\"><INPUT type=\"button\" name=\"addfield\" value=\"add!\ onclick=\"addfield(XXXXX)\">"; /*i want the value in addfield to be unique for a specific "my"+num+"Div" so for every field a create to be able to create as many subfields as i want..for example i want this... create my1div then press add! and create for example my1.1div press again and create my1.2div create my2div create my3div then press add! and create for example my3.1div press again and create my3.2div */ ni.appendChild(newdiv); } function addsubfield(){//here i want to create <input type=\"text\" name=\"something else\"> XXXXXXXXX } </script> PHP: <body> <input type="hidden" value="0" id="theValue" /> <p><a href="javascript:;" onclick="addfield();">Add Some Elements</a></p> <div id="myDiv"> </div> </body> HTML:
I am note 100% sure what you want, but I think this comes close. Full page, tested in FF3 <html> <head> <script type="text/javascript"> //Track how many divs added var numDiv = 0; //Add a div to the page // function addDiv() { numDiv += 1; //need something to append to parentDiv = document.body; //set the name var divIdName = "myDiv" + numDiv; //create object var newdiv = document.createElement('div'); newdiv.setAttribute("id",divIdName); //set style so we can see it newdiv.setAttribute("style", "width: 200px; height:200px; border-style: solid; border-color: black;"); //create the button var newButton = document.createElement('input'); newButton.setAttribute('type', 'button'); newButton.value = 'add'; //Set the onclick handler. Note how we pass 'this' to the function. newButton.setAttribute('onclick', 'addField(this);'); newdiv.appendChild(newButton); parentDiv.appendChild(newdiv); } //add the field. Remember how we pass 'this' above? now it is refObj (Reference Object) function addField(refObj) { //Get the buttons parent. So we know who to add the field to. var parentDiv = refObj.parentNode; //Add a custome field to the parentDiv object. We need to track how many fields are in the div to name it if (!parentDiv.numFields) parentDiv.numFields = 1; else parentDiv.numFields += 1; //basic create var inputBox = document.createElement('input'); inputBox.setAttribute('type', 'text'); //Get the parents id + how many fields gives us a unique id inputBox.id = parentDiv.id + 'input' + parentDiv.numFields; inputBox.setAttribute('onfocus', 'showId(this)'); parentDiv.appendChild(inputBox); } //Just to show the names of the fields. Testing only function showId(refObj) { alert(refObj.id); } </script> </head> <body> <input type="button" value="AddDiv" onclick="addDiv();"/> <!--<div id="parentDiv" style="width: 200px; height:200px; border-style: solid; border-color: black;"> <input type="button" value="add" onclick="addField(this);" /> </div>--> <input type="hidden" value="0" id="theValue" /> </body> </html> Code (markup):