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

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

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>

liタグを追加する箇所のHTML記述

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

for文のJavaScritp記述

※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>

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

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