JavaScriptのfor文を使ってループ回数分タグ要素を追加する方法【HTMLタグ簡略化】 DAD UNION

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

Contents

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

JavaScriptのfor文を使ってループ回数分タグ要素を追加する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>

JavaScriptのfor文を使ってループ回数分liタグ要素を追加する出力先のHTML記述

※ループ回数分liタグ要素を追加する出力先（class=”fortxt”）を用意します。

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

<ul class="fortxt">
</ul>

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

※jquery-2.2.0.min.jsファイルを読み込みます。for文で10回ループし、appendを使ってulタグ(class=fortxt)にliタグを追加してます。

<script src="./jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  for(i=1;i<=10;i++){
    $('.fortxt').append('<li>追加テキスト'+i+'</li>')
  }
});
</script>