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 : stackoverflow.com/questions/6304453/…

SamGhatak
– SamGhatak

2016-05-05 11:30:32 +00:00
Commented May 5, 2016 at 11:30 — SamGhatak
– SamGhatak, Commented May 5, 2016 at 11:30
stackoverflow.com/questions/37049408/…

Jinu Kurian
– Jinu Kurian

2016-05-05 11:50:50 +00:00
Commented May 5, 2016 at 11:50 — Jinu Kurian
– Jinu Kurian, Commented May 5, 2016 at 11:50
Possible duplicate of Create a div using loop

Mohammedshafeek C S
– Mohammedshafeek C S

2016-05-05 11:50:50 +00:00
Commented May 5, 2016 at 11:50 — Mohammedshafeek C S
– Mohammedshafeek C S, Commented May 5, 2016 at 11:50

Wowsk · Accepted Answer · 2016-05-05 11:29:51Z

4

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.

answered May 5, 2016 at 11:29

Wowsk

3,6852 gold badges20 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jinu Kurian · Accepted Answer · 2016-05-05 12:35:17Z

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 5, 2016 at 12:35

answered May 5, 2016 at 11:44

Jinu Kurian

9,5263 gold badges31 silver badges37 bronze badges

3 Comments

Haroen Viaene Over a year ago

You shouldn't have multiple elements with the same class. It would better be changed to class

Jinu Kurian Over a year ago

In that case, we can use vertical.className = "verticle-line"; instead of vertical.id = "verticle-line"; Will update the snippet anyway

Augustus Over a year ago

@Jinu Kurian is there a way to create some horizontal lines over vertical ones so that I get a graph-like drawing.

Collectives™ on Stack Overflow

creating multiple vertical lines in HTML using loops

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related