Использование цикла for внутри innerHTML

Question

Я хочу добавить в него ящик с отдельными ящиками с каждым возрастом, когда функция запускается. Я попытался сделать это, разделив innerHTML и используя цикл for только в разделе agebox, чтобы он каждый раз зацикливал и создавал новый возрастной блок, а также не создавал весь внешний бокс, а также каждый раз, как если бы вы пытались объединить все. Я думал, что это сработает, но теперь он создает поле возраста для каждого цикла, но его размещают вне внешней коробки, и я не могу понять, как заставить его зацикливаться внутри внешней коробки. Если я удалю цикл и просто создаю один innerHTML, тогда возрастные ящики, которые я сделал вручную, находятся внутри внешнего поля, поэтому я предполагаю, что проблема связана с фактическим расщеплением внутреннегоHTML. Заранее спасибо!!

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>"; 
    } 

Answer 1

Вам необходимо сохранить выходной контент в виде строки, а затем добавить его в DOM. В противном случае div будет автоматически закрыт.

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

Answer 2

Линия

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

фактически производит

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

потому, что большинство браузеров автоматически закрывать HTML-теги.

Вы должны написать весь свой HTML в строковый буфер, а затем добавить его одним большим вызовом; например:

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; 
} 

Это имеет дополнительное преимущество только прикоснувшись к DOM один раз, а не в 7 раз (что в целом хорошая вещь).