在 innerHTML 中使用 for 循环

Posted 2023-05-07

【中文标题】在 innerHTML 中使用 for 循环

【英文标题】：Using a for loop within innerHTML

【发布时间】：2015-06-27 19:19:08

【问题描述】：

我想在函数运行时添加一个盒子，里面有单独的盒子。我尝试通过拆分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>";
    

【问题讨论】：

不要把 DOM 当作一串 HTML 来对待，你会做得更好。

【参考方案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

【讨论】：

这很有意义，但是当我尝试它时，现在什么都没有发生

它在fiddle 中有效，因此您的代码中肯定有其他问题。

啊，我在写这篇文章时更改了 id 和类名，这样更容易解释，我只是复制粘贴了你的代码哈哈，但现在它工作得很好。谢谢！！

不错的解决方案。工作正常。

我需要使用范围输入生成 1 到 5 个输入字段来生成数值，这个示例给出了使其工作所需的答案。非常感谢。

【参考方案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 次（这通常是一件好事）。