Question

<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-*事物

Answer 1

在上次# # Virtual Hosts # # If you want to maintain multiple domains/hostnames on your # machine you can setup VirtualHost containers for them. Most configurations # use only name-based virtual hosts so the server doesn't need to worry about # IP addresses. This is indicated by the asterisks in the directives below. # # Please see the documentation at # <URL:http://httpd.apache.org/docs/2.2/vhosts/> # for further details before you try to setup virtual hosts. # # You may use the command line option '-S' to verify your virtual host # configuration. # # Use name-based virtual hosting. # #NameVirtualHost *:80 # # VirtualHost example: # Almost any Apache directive may go into a VirtualHost container. # The first VirtualHost section is used for all requests that do not # match a ServerName or ServerAlias in any <VirtualHost> block. # <VirtualHost web-backend.local:* > DocumentRoot "/Users/yawuarsernadelgado/Documents/web-backend/cursus" ServerName web-backend.local <Directory "/Users/yawuarsernadelgado/Documents/web-backend/cursus"> AllowOverride All Require all granted Options +Indexes IndexOptions NameWidth=* </Directory> ServerAlias web-backend.local </VirtualHost> <VirtualHost oplossingen.web-backend.local:* > DocumentRoot "/Users/yawuarsernadelgado/Documents/web-backend/oplossingen" ServerName oplossingen.web-backend.local <Directory "/Users/yawuarsernadelgado/Documents/web-backend/oplossingen"> Allow from all Require all granted Options +Indexes IndexOptions NameWidth=* </Directory> </VirtualHost>

后删除分号

</div>

Answer 2

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

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

另一件事 - 您使用"</div>";终止HTML字符串 - 分号在此处无效，您应将其删除。

Answer 3

删除document.write方法中的semiColon。

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

Answer 4

请注意。使用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);

Answer 5

您可以在加载页面时使用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;
}

如何使用JavaScript写入html？

5 个答案: