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?

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?

• javascript
• html
• css

• check this link : stackoverflow./questions/6304453/… – SamGhatak Commented May 5, 2016 at 11:30
• stackoverflow./questions/37049408/… – Jinu Kurian Commented May 5, 2016 at 11:50
• Possible duplicate of Create a div using loop – Mohammedshafeek C S Commented May 5, 2016 at 11:50

2 Answers 2

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.

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>