javascript - 在 innerHTML 中使用 for 循环

Question

我想在函数运行时添加一个盒子，其中包含每个年龄段的单独盒子。我尝试通过拆分 innerHTML 并在 agebox 部分使用 for 循环来做到这一点，这样它每次都会循环并创建一个新的 age box，而不是每次都创建一个完整的 outerbox，就像你尝试循环整个东西一样。我认为这行得通，但现在它为每个循环创建了一个年龄框，但它放置在外框外面，我无法弄清楚如何让它在外框内循环。如果我删除循环并只创建一个 innerHTML，那么我手动创建的年龄框位于外部框内，因此我假设 innerHTML 的实际拆分存在问题。提前致谢!!

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