I want to add a box with individual boxes inside it with every age when the function is run. I tried doing it by splitting the innerHTML and using the for loop on just the agebox section so it will loop and create a new age box each time and not create a whole outerbox as well everytime like if you try loop the entire thing. I thought this would work but now it creates an age box for each loop but its placed outside the outer box and i cant figure out how to get it to loop within the outer box. If i remove the loop and just create one innerHTML then the age boxes i made manually are inside the outer box so im assuming theres a problem with the actual splitting up of the innerHTML. Thanks in advance!!

function Age(gender){
        if (gender!==undefined){
            el1 = document.getElementById('userdata');
            el1.innerHTML += gender +"<br>";    
        }
        el1 = document.getElementById('farespage');
        el1.innerHTML += "<div id=\"outerbox\">";
        for(var i=13; i<=18; i++){
            el1.innerHTML +="<div class=\"agebox\" onclick=\"Relationship('"+i+"')\">"+i+"</div>";
        }
        el1.innerHTML += "</div><button type=\"button\" onclick=\"goback('Gender')\">back</button>";
    }

I want to add a box with individual boxes inside it with every age when the function is run. I tried doing it by splitting the innerHTML and using the for loop on just the agebox section so it will loop and create a new age box each time and not create a whole outerbox as well everytime like if you try loop the entire thing. I thought this would work but now it creates an age box for each loop but its placed outside the outer box and i cant figure out how to get it to loop within the outer box. If i remove the loop and just create one innerHTML then the age boxes i made manually are inside the outer box so im assuming theres a problem with the actual splitting up of the innerHTML. Thanks in advance!!

function Age(gender){
        if (gender!==undefined){
            el1 = document.getElementById('userdata');
            el1.innerHTML += gender +"<br>";    
        }
        el1 = document.getElementById('farespage');
        el1.innerHTML += "<div id=\"outerbox\">";
        for(var i=13; i<=18; i++){
            el1.innerHTML +="<div class=\"agebox\" onclick=\"Relationship('"+i+"')\">"+i+"</div>";
        }
        el1.innerHTML += "</div><button type=\"button\" onclick=\"goback('Gender')\">back</button>";
    }

• javascript
• html
• dom
• for-loop
• innerhtml

• 1 Just don't treat the DOM as though it's a string of HTML, and you'll do much better. – Lye Fish Commented Apr 20, 2015 at 21:24

2 Answers 2

You need to store the output content as a string and then append it to the DOM. Otherwise, the div will be auto-closed.

el1 = document.getElementById('farespage');

output = "<div id=\"outerbox\">"; //initialize output string

//build output string
for(var i=13; i<=18; i++){
    output +="<div class=\"agebox\" onclick=\"Relationship('"+i+"')\">"+i+"</div>";
}

output += "</div><button type=\"button\" onclick=\"goback('Gender')\">back</button>";

el1.innerHTML = output; //output to DOM

View Fiddle

The line

el1.innerHTML += "<div id=\"outerbox\">";

is actually producing

<div id="outerbox"></div>

because most browsers will auto-close the HTML tags.

You should write all your HTML into a string buffer then append it with one big call; for example:

function Age(gender){
    if (gender!==undefined){
        el1 = document.getElementById('userdata');
        el1.innerHTML += gender +"<br>";    
    }

    el1 = document.getElementById('farespage');
    // Magic begins here
    var yourHTML = "";
    yourHTML += "<div id=\"outerbox\">";
    for(var i=13; i<=18; i++){
        yourHTML +="<div class=\"agebox\" onclick=\"Relationship('"+i+"')\">"+i+"</div>";
    }
    yourHTML += "</div><button type=\"button\" onclick=\"goback('Gender')\">back</button>";

    el1.innerHTML += yourHTML;
}

This has the added benefit of only touching the DOM once and not 7 times (which is generally a good thing).