javascript - creating multiple vertical lines in HTML using loops - Stack Overflow

admin管理员组

文章数量:1023187

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

Share Improve this question Follow edited May 27, 2016 at 5:50 Augustus asked May 5, 2016 at 11:27 AugustusAugustus 1,50922 gold badges1717 silver badges3131 bronze badges 3

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

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>

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

Share Improve this question Follow edited May 27, 2016 at 5:50 Augustus asked May 5, 2016 at 11:27 AugustusAugustus 1,50922 gold badges1717 silver badges3131 bronze badges 3

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

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>

本文标签： javascriptcreating multiple vertical lines in HTML using loopsStack Overflow