如何使用 JavaScript 写入 html？答案

【问题标题】：How do I write into the html using JavaScript?如何使用 JavaScript 写入 html？
【发布时间】：2017-01-31 04:53:19
【问题描述】：

<script>
for(var numCols = 1; numCols <= 12; numCols++){
    document.write(
                        "<div class='row'>" +
                        "<div class='well text-center col-lg-" + [numCols] + "'>" + ".col-lg-" + [numCols] + "</div>" +
                        "</div>"; 
                    );
}
</script>

我知道有document.write/document.writeln，但我有这个脚本，但我不知道出了什么问题。我正在尝试可视化 Bootstrap 的 col-md-* 东西

【问题讨论】：

Adding HTML elements with JavaScript的可能重复
看看：When should one use .innerHTML and when document.write in JavaScript和document.write vs appendChild

标签： javascript html twitter-bootstrap loops dom

【解决方案1】：

您可以在页面加载时使用 innerHTML 更改 DOM 元素的内容。

window.onload = function() {
    var content = "";
    for(var numCols = 1; numCols <= 12; numCols++) {
        content += "<div class='row'>" +
                   "<div class='well text-center col-lg-" + numCols + "'>" +              ".col-lg-" + numCols + "</div>" +
                   "</div>";
    }

    document.getElementsByTagName('body')[0].innerHTML = content;
}

【讨论】：

【解决方案2】：

注意。使用 DOM 意味着，客户端必须完成工作。对 DOM 进行多次更改可能会导致我们出现一些性能问题。

理想情况是，不要修改 DOM。如果你真的需要这样做。找到对 DOM 进行较少更改的方法。

您提供给我们的那段代码有待改进的可能。

在您的代码中，您使用的是循环。 DOM 会改变 12 倍。这些远不是一个好的做法。

更好的方法是只编写一次 DOM。在这种情况下，您可以轻松实现添加两行代码。

由此（12 次 DOM 更改）：

for(var numCols = 1; numCols <= 12; numCols++){
    document.write(
        "<div class='row'>" +
        "<div class='well text-center col-lg-" + [numCols] + "'>" + ".col-lg-" + [numCols] + "</div>" +
        "</div>"
    );
}

对此（1 更改为 DOM）：

var newHtml = '';
for(var numCols = 1; numCols <= 12; numCols++){
    newHtml+= "<div class='row'>" +
        "<div class='well text-center col-lg-" + [numCols] + "'>" + ".col-lg-" + [numCols] + "</div>" +
        "</div>";
}
document.write(newHtml);

【讨论】：

【解决方案3】：

删除 document.write 方法中的分号。

for(var numCols = 1; numCols <= 12; numCols++){
    document.write(
                        "<div class='row'>" +
                        "<div class='well text-center col-lg-" + [numCols] + "'>" + ".col-lg-" + [numCols] + "</div>" +
                        "</div>"
                    );
}

【讨论】：

【解决方案4】：

问题在于字符串连接的[numCols] 部分和函数调用参数末尾不必要的分号。

基本上，这个“部分”的作用是返回一个包含一个元素的数组，解析为numCols 变量值。您想返回变量本身，因此只需删除 [] 包装器。从技术上讲，JS 允许您使用这种语法，因为它将数组转换为字符串，将数组中的所有元素与一个空字符串（相当于[ numCols ].join("")）连接起来，但在这种情况下它是不必要的。

另外一件事——你用"</div>";来终止HTML字符串——这个地方的分号是无效的，你应该把它去掉。

【讨论】：

【解决方案5】：

去掉最后一个</div>后面的分号

<script>
for(var numCols = 1; numCols <= 12; numCols++){
    document.write(
                        "<div class='row'>" +
                        "<div class='well text-center col-lg-" + [numCols] + "'>" + ".col-lg-" + [numCols] + "</div>" +
                        "</div>"
                    );
}
</script>

【讨论】：