creating multiple vertical lines in HTML using loops

Question

I'm new to JS and would like to create 10 vertical lines in my webpage. I have written my HTML code as

  <div id="verticle-line"></div>

and in my CSS I have

#verticle-line {
width: 1px;
min-height: 400px;
background: red;  
margin:15px;  
float:left
}

How Can I create 10 such lines in my webpage using JavaScript?

check this link : http://stackoverflow.com/questions/6304453/javascript-append-html-to-container-element-without-innerhtml — SamGhatak, May 05 '16 at 11:30
http://stackoverflow.com/questions/37049408/creating-multiple-vertical-lines-in-html-using-loops#answer-37049747 — Jinu Kurian, May 05 '16 at 11:50
Possible duplicate of [Create a div using loop](http://stackoverflow.com/questions/11398522/create-a-div-using-loop) — Mohammedshafeek C S, May 05 '16 at 11:50

score 4 · Accepted Answer · answered May 05 '16 at 11:29

There are many ways to do this but the easiest would probably be this:

for(var i=0; i<10; i++) {
  document.write('<div class="verticle-line"></div>');
}

Use a for loop to write 10 divs on your page. I also changed id to class, because you should not have more than one element with the same id on your page. Make sure you change your CSS to match a class.

Jinu Kurian · Answer 2 · 2016-05-05T12:35:17.133

3

See this -

for(x=0; x<9;x++) {
    var vertical = document.createElement('div');
    vertical.className = "verticle-line";
    document.getElementById('wrapper').appendChild(vertical);
}

.verticle-line {
  width: 1px;
  min-height: 400px;
  background: red;
  margin: 15px;
  float: left
}

<div id="wrapper">
  <div class="verticle-line"></div>
</div>

edited May 05 '16 at 12:35

answered May 05 '16 at 11:44

Jinu Kurian

9,128
3
27
35

You shouldn't have multiple elements with the same class. It would better be changed to class – Haroen Viaene May 05 '16 at 12:19
In that case, we can use vertical.className = "verticle-line"; instead of vertical.id = "verticle-line"; Will update the snippet anyway – Jinu Kurian May 05 '16 at 12:34
@Jinu Kurian is there a way to create some horizontal lines over vertical ones so that I get a graph-like drawing. – Augustus May 10 '16 at 13:20

creating multiple vertical lines in HTML using loops

2 Answers2