How do I write into the html using JavaScript?

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>

I know there's document.write / document.writeln but I have this script and I don't know what's wrong. I'm trying to visualize Bootstrap's col-md-* thing

Answer 1

Remove the semicolon after last </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>

Answer 2

The problem is with the [numCols] part of string concatenation and unnecessary semicolon at the end of function call argument.

Basically, what this "part" does is it returns an Array with one element, resolving to numCols variable value. You want to return the variable itself, so just remove [] wrapper. Technically, JS allows you to use this syntax, because it casts the array to string, concatenating all the elements within the array with an empty string (equivalent to [ numCols ].join("") ), but it's just unnecessary in this case.

Another thing - you are terminating HTML string with "</div>"; - the semicolon is invalid in this place, you should remove it.

Answer 3

Remove the semiColon inside your document.write method.

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

Be aware. Working with the DOM means, the client has to do the work. Doing several changes to the DOM could lead us to several performance issues.

The ideal is, do not modify the DOM. If you really need to do this. Find the way to do the less changes to the DOM.

The piece of code you provide us have the possibility to be improved.

In your code, you are using a loop. 12 times the DOM would change. These is far away of be a good practice.

A better approach is to write the DOM only 1 time. In this scenario you can easily achieve adding two lines of code.

From this ( 12 DOM changes ):

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

To this ( 1 change to the 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

You can use innerHTML to change the content of DOM element when the page is loaded.

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