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

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

Contents

ループ回数分タグ要素を追加するCSSの記述
while文を使ってループ回数分タグ要素を追加するHTMLの記述
while文を使ってループ回数分タグ要素を追加するJavaScriptの記述
while文を使ってループし、ulタグ内にliタグを追加するデモページ

ループ回数分タグ要素を追加するCSSの記述

※ループ回数分liタグ要素を追加するCSS記述です。必要に応じて書き換えてください。

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",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>

while文を使ってループ回数分タグ要素を追加するHTMLの記述

※ループ回数分タグ要素（liタグ）の出力先（class=”whiletxt”）を用意します。必要に応じて変更して下さい。

<h1>以下はwhile文を使って10回ループし、ulタグ内にliタグを10個追加してます</h1>

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

while文を使ってループ回数分タグ要素を追加するJavaScriptの記述

※jquery-2.2.0.min.jsファイルを読み込みます。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>