配列の内容を、DOM操作で順序リスト(ol要素)に表示

JavaScriptにおいて、配列の内容を、ユーザー定義関数forループ文、DOM操作などを使い、順序リスト(ol要素)に表示するサンプル。

実装例

ソースコード

JavaScript

<script type="text/javascript">
window.onload = function () {
    document.getElementById( "sample" ).innerHTML = funcList();
}
function funcList() {
    var $arr = new Array( "項目1", "項目2", "項目3", "項目4", "項目5" );
    var $list = '<ol>\n';
    for( var $counterVar = 0; $counterVar < $arr.length; $counterVar++ ) {
        $list += '<li>';
        $list += $arr[$counterVar];
        $list += '</li>\n';
    }
    $list += '</ol>';
    return $list;
}
</script>

HTML

<div id="sample"></div>

スポンサード リンク

カテゴリー: JavaScript, リスト, 逆引き, 配列 パーマリンク