在javascript中用document.write循环输出

Question

问题：如何在javascript中使用循环构建变量的字符串内容？

我需要做我在下面的脚本(php)中所做的工作，但我需要将它作为字符串插入javascript变量中，而不是输出到页面。

$titles[1]='fire';
$titles[2]='auto';
$titles[3]='health';
$titles[4]='loan';
$titles[5]='life';

for ($x=1; $x<=5; $x++)
    {
    echo
    '
    <div class="ball">

        <p class="ball-fraction">
            <span id="attained-' . $titles[ $x ] . '-score">0</span>/<span id="required-' . $titles[ $x ] . '-score">0</span>
        </p>
        <p class="ball-title">
            ' . $titles[ $x ] . '
        </p>
    </div>
    '
    }

用途:一旦完成了这个任务，我就可以使用变量作为一个循环的父元素集合中的模块。简单地说，是列表中的列表输出。假设这是必要的，因为页面内容的动态性质，并且为了更短的代码。

示例1:

​

在本例中，当页面加载时，用户的5个stat模块可以使用php生成，并且随着时间的推移，javascript (基于节点)动态控制页面中的信息。

示例2:

​

另一方面，在这个例子中，需要在另一个循环输出(列表中的每个条目)中使用循环的stat模块。

Answer 1

使用+进行字符串连接。

var titles = [ "fire", "auto", "home", "health", "life" ];
var result = '';
for (var x = 0; x < titles.length; x++) {
    result += '<div class="ball"> \
                <p class="ball-fraction"> \
                    <span id="attained-' . titles[x] + '-score">0</span>/<span id="required-' + titles[x] + '-score">0</span> \
                </p> \
                <p class="ball-title">'+ titles[x] + '</p> \
            </div>';
}
document.getElementById('someDiv').innerHTML = result;

Answer 2

我的建议是你仍然可以输出所有的内容。但是您可以使用css设置display:none;。然后，当您需要显示它时，您可以在您想要的任何地方使用javascript进行显示。