JavaScriptにおいて、簡易オブジェクト(連想配列)の内容を、ユーザー定義関数、forループ文、DOM操作などを使い、順不同リスト(ol要素)に表示するサンプル。
実装例
ソースコード
JavaScript
<script type="text/javascript">
window.onload = function () {
document.getElementById( "sample" ).innerHTML = funcList();
}
function funcList() {
var $obj = {
propA: "値1",
propB: "値2",
propC: "値3",
propD: "値4",
propE: "値5"
};
var $list = '<ul>\n';
for ( var $prop in $obj ) {
$list += '<li>';
$list += $obj[$prop];
$list += '</li>\n';
}
$list += '</ul>';
return $list;
}
</script>
window.onload = function () {
document.getElementById( "sample" ).innerHTML = funcList();
}
function funcList() {
var $obj = {
propA: "値1",
propB: "値2",
propC: "値3",
propD: "値4",
propE: "値5"
};
var $list = '<ul>\n';
for ( var $prop in $obj ) {
$list += '<li>';
$list += $obj[$prop];
$list += '</li>\n';
}
$list += '</ul>';
return $list;
}
</script>
HTML
<div id="sample"></div>