JavaScriptで箇条書きを生成―innerHTMLとfor in文を使ってliタグを追加する例など

innerHTMLプロパティとfor in文を使ってliタグを追加する例など。JavaScriptで箇条書きを生成するやり方をまとめています。

▲記事トップへ

JavaScriptで箇条書きを生成する方法

JavaScriptでinnerHTMLとfor in文を使ってliタグを追加すれば、箇条書きが生成できます。

innerHTMLプロパティは、DOMでよく使われるプロパティで指定したタグのテキスト内容を参照したり、設定したりすることができます。

for in文は、オブジェクトのプロパティを順に変数に格納して、for文と同じ様に文を繰り返し実行します。オブジェクトに含まれる要素を全て利用するような処理の場合に利用できます。

補足

なお、関連情報として以下のような内容がありますので、はじめに紹介しておきます。

htmlのタグのテキスト内容の変更
JavaScriptでinnerHTMLを操作した書き換えの例など
onblurイベント（テキストフィールド0埋め補完の例）
テキストフィールドへの入力値が8ケタに満たない場合0埋めするサンプル。
jQuery
JavaScriptライブラリのjQueryに関連した技術情報を掲載しています。

JavaScriptで箇条書きを生成する例

innerHTMLとfor in文を使ってliタグを追加する例を以下で見ていきます。

サンプルソース

ボタンをクリックすると、idがaというulタグに箇条書きを追加するサンプルプログラムです。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>

<ul id="a"><li>ここに文字列を出力します。</li></ul>

<input type="button" value="四季を表示する" onclick="showItemizedStatement(season);">
<script type="text/javascript">
var season = ['Spring', 'Summer', 'Fall', 'Winter'];

function showItemizedStatement(listObj) {
	var str = '';

	// オブジェクトのプロパティを順に変数に格納
	for (var prop in listObj) {
		str = str + '<li>' +listObj[prop] + '</li>';
	}
	document.getElementById('a').innerHTML = str;
}
</script>

</body>
</html>