ループでHTMLに複数の縦線を作成する

Question

私はJSを初めて使い、自分のウェブページに10本の縦線を作成したいと考えています。私はJavaScriptを使用して、私のWebページでは、このような10行を作成する方法を

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

を持って

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

として、私のCSSで私は自分のHTMLコードを書かれていますか？

Answer 1

あり、これを行うには多くの方法がありますが、最も簡単な、おそらくこのようになります：

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

ページ上の10のdivを書くためのforループを使用してください。私はあなたのページに同じidを持つ複数の要素を持つべきではないので、idをclassに変更しました。クラスに合わせてCSSを変更してください。

Answer 2

この参照してください - このリンクをチェック

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>