Erstellen mehrerer vertikaler Linien in HTML mit Loops

Question

Ich bin neu in JS und möchte 10 vertikale Linien in meiner Webseite erstellen. Ich habe meinen HTML-Code geschrieben als

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

und in meinem CSS I

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

habe Wie kann ich 10 solche Linien in meiner Webseite erstellen mit Hilfe von JavaScript?

Answer 1

Es gibt viele Möglichkeiten, dies zu tun, aber die einfachste wäre dies wahrscheinlich sein:

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

Verwendung einer for-Schleife 10 divs auf Ihrer Seite zu schreiben. Ich habe auch ID in Klasse geändert, weil Sie nicht mehr als ein Element mit derselben ID auf Ihrer Seite haben sollten. Stellen Sie sicher, dass Sie Ihr CSS so ändern, dass es einer Klasse entspricht.

Answer 2

Sehen Sie diese -

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>