トップ 言語 JavaScript 基礎編 DOM innerHTMLプロパティ 箇条書きを生成

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

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

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

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

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

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

補足

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

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>

表示方法と表示結果

htmlファイルに保存して、ChromeやFirefoxなど、ブラウザで開けば表示できます。 表示した結果は次のようになります。

はじめにページを表示した段階では「ここに文字列を出力します。」と表示されます。

JavaScriptで箇条書きを生成する例―変更前

「四季を表示する」ボタンをクリックするとliタグの要素が生成されて「Spring」、「Summer」、「Fall」、「Winter」の箇条書きが表示されます。

JavaScriptで箇条書きを生成する例―変更後

もっと別の変更の仕方のサンプル

JavaScriptでの変更の仕方に関しての専用サイトを作成しました。 もっと別の変更の仕方のサンプルがあります。

もっと知識を広げるための参考

戻る

スポンサーリンク

サイト内のページ

言語
C・C++ /HTML /Java /JavaScript /PHP /シェルスクリプト

開発環境
Ant /Bcc /Eclipse /gcc /gdb /g++ /JDK /JUnit /ZAP

技術・仕様
Ajax /CORBA /Java EE(旧称J2EE) /JNI

ライブラリ/Framework/CMS
jQuery /Lucene /MyBatis /RESTEasy /Spring /Struts /Seasar2 /WordPress

ITインフラ OSとミドルウェア
Linux /Windows /シェル
Apache/Tomcat /MySQL /Redis /Solr /vsftpd

ITインフラ PC 製品
ZOTAC

ITインフラ サーバー
Web公開サーバー構築

ITインフラ ネットワーク
プログラミング /機器 /構築

ITインフラ セキュリティ
公開サーバーのセキュリティ

SI
ホームページの作り方 /小さな会社のISMS

その他
IT用語 /ITスキル体系 /トレンド履歴 /翻訳英語の学習 /RSEUserGuide翻訳

スポンサーリンク