create elements dynamically into a already dynamicall created element

Discussion in 'JavaScript' started by psim, Feb 24, 2009.

0
  1. #1
    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 &quot;"+divIdName+"&quot;</a><div id=\""+num+"\"> </div><a href=\"javascript:;\" onclick=\"addsubEvent(\'"+num+"\')\">Add subevent&quot;</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 &quot;"+divIdName+"&quot;</a><div id=\"+num+\"> </div>";
  ni.appendChild(newdiv);
}

function removesubElement(divNum) {// i want this function to remove the subelement
  xxxx
}
</script>
    PHP:
    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>
    HTML:
     
    psim, Feb 24, 2009 IP
  2. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #2 
    function addsubEvent(id) {// i want this function to create dynamically elements into a dynamically created element
  var ni = document.getElementById('id');
    PHP:
    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.
     
    dimitar christoff, Feb 24, 2009 IP