while文を使ってループ回数分タグ要素を追加する方法【HTMLタグ反復処理】

while文を使ってループ回数分タグ要素を追加する方法【HTMLタグ反復処理】

JavaScriptのwhile文を使ってループし、ulタグ内にliタグを追加する方法です。
前回の記事(for文を使ってループ回数分タグ要素を追加する方法【HTMLタグ簡略化】)とほぼ同じ処理をやってます。
規則的に増えるリスト(li)や画像(img)タグを並べて表示させる時等、HTMLタグを直接ハードコーディングするのでは無く、JavaScriptのwhile文を使ってタグ要素を反復処理で出力しマークアップの簡略化や効率化ができます。

CSSの記述例

※ここは重要では無いので、必要に応じて書き換えてください。

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
}
h1{
  font-size:16px;
  line-height:1.6em;
  text-align:center;
  font-weight:normal;
  padding:10px 0 30px 0;
}

ul{
  width: 120px;
  margin: 0 auto;
  padding: 0;
}
ul li{
  list-style: none;
  text-align: center;
  font-weight: bold;
}
</style>

liタグを追加する箇所


<ul class="whiletxt">
</ul>

while文のJavaScritp記述

※while文で10回ループし、appendを使ってulタグ(class=whiletxt)にliタグを追加してます。

<script src="./jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  var i=1;

  while(i<=10){
    $('.whiletxt').append('<li>追加テキスト'+i+'</li>')
    i++;
  }
});
</script>

 

while文を使ってループし、ulタグ内にliタグを追加するデモ

※流用される場合は自己責任でお願いします。
 タグ内のGoogleアナリティクスタグは流用しないで下さい。