create elements dynamically into a already dynamicall created element

psim

Feb 24th 2009, 3:53 am

Hi, i am having trouble with the above script.
The first part which is to create dynamically an element inside id="mydiv" is working fine...
I want for every created element inside id="mydiv"...to be able to create elements inside id="sub+num+"...
and the count for num to start from the beggining for every added element...for example

create element for mydiv:
mydiv1
mydiv2
mydiv3
sub1
sub2
sub3
mydiv4
sub1
sub2
sub3
etc....
any help please...
thanks in advance...

Javascript code:
<script>
function addEvent() {
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 = "Element Number " + num + " has been added! <a href=\"javascript:;\" onclick=\"removeElement(\'"+divIdName+"\')\">Remove the element ""+divIdName+""</a><div id=\""+num+"\"> </div><a href=\"javascript:;\" onclick=\"addsubEvent(\'"+num+"\')\">Add subevent"</a>";
ni.appendChild(newdiv);
}

function removeElement(divNum) {
var d = document.getElementById('myDiv');
var olddiv = document.getElementById(divNum);
d.removeChild(olddiv);
}

function addsubEvent(id) {// i want this function to create dynamically elements into a dynamically created element
var ni = document.getElementById('id');
var numi = document.getElementById('thesubValue');
var num = (document.getElementById("thesubValue").value -1)+ 2;
numi.value = num;
var divIdName = "my"+num+"Div";
var newdiv = document.createElement('div');
newdiv.setAttribute("id",divIdName);
newdiv.innerHTML = "Element Number " + num + " has been added! <a href=\"javascript:;\" onclick=\"removeElement(\'"+divIdName+"\')\">Remove the element ""+divIdName+""</a><div id=\"+num+\"> </div>";
ni.appendChild(newdiv);
}

function removesubElement(divNum) {// i want this function to remove the subelement
xxxx
}
</script>
Html code:

<body>
<input type="hidden" value="0" id="theValue" />
<input type="hidden" value="0" id="thesubValue" />
<p><a href="javascript:;" onclick="addEvent();">Add Some Elements</a></p>
<div id="myDiv"> </div>
</body>

dimitar christoff

Feb 24th 2009, 6:43 am

function addsubEvent(id) {// i want this function to create dynamically elements into a dynamically created element
var ni = document.getElementById('id');

for starters, lose the ' around id in the the getElement call here, you want it to refrence the variable id, not an element that has id="id". the way you call the function on the onclick also seems to pass on 'num' as the id, doesn't that hold a numeric value only? so what will getelementbyid(2) return anyway?

sorry i dont have more time to help, perhaps later on.