iPentec.com / Document / カテゴリ: JavaScript / タグ: JavaScript

JavaScriptでボタンを動的に作成する

概要

ページ表示後にリンクのクリックやボタンのクリックでボタンを動的に表示したい場合があります。
この記事では、JavaScriptを利用してボタンを動的に生成してページに表示するコードを紹介します。

メモ

ボタンの個数やボタンのキャプション文字列があらかじめ決まっている場合は、HTMLにボタンのコードを記述しておき、 CSSの表示切替でボタンを表示させる方法もあります。
CSSによる要素の表示、非表示の切り替えはこちらの記事を参照してください。

実装例

コード

以下のHTMLファイル、JavaScriptを作成します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
      function Exec() {
        var elem = document.getElementById("OutFrame");
        htmltext = '';
        for (i = 1; i < 6; i++) {
          caption = "ボタン" + i;
          htmltext += '<input type="button" value='+caption+'></input>&nbsp;';
        }
        elem.innerHTML = htmltext;
      }
    </script>
</head>
<body>
  <h2>JavaScriptによるボタンの動的生成</h2>

  <a href="javascript:Exec();">クリックで実行</a>
  <hr />
  <div id="OutFrame">
  </div>
</body>
</html>

解説

以下のリンクのクリックで、JavaScriptのExec()関数を呼び出して実行します。

  <a href="javascript:Exec();">クリックで実行</a>

Exec関数のコードは以下です。
getElementById()メソッドを呼び出し、id="OutFrame" の要素を取得し、elem変数に格納します。
htmltext変数を初期化し、forループ内でボタンのHTMLコードをhtmltextに追加します。forループのループ回数個のボタンが生成されます。
作成したhtmltext変数の文字列をelemオブジェクトのinnerHTMLプロパティに設定し、画面にボタンを表示します。

  function Exec() {
    var elem = document.getElementById("OutFrame");
    htmltext = '';
    for (i = 1; i < 6; i++) {
      caption = "ボタン" + i;
      htmltext += '<input type="button" value='+caption+'></input>&nbsp;';
    }
    elem.innerHTML = htmltext;
  }

htmltext変数を使用する理由

以下のコードのようにinnerHTMLに直接足しこむコードも記述はできますが、誤動作の原因となる可能性があります。詳しくはこちらの記事を参照してください。

    for (i = 1; i < 6; i++) {
      caption = "ボタン" + i;
      elem.innerHTML += '<input type="button" value='+caption+'></input>&nbsp;';
    }

別の対処法として、insertAdjacentHTML メソッドを利用する方法もあります。
insertAdjacentHTMLメソッドの詳細はこちらの記事を参照してください。

コード例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
      function Exec() {
        var elem = document.getElementById("OutFrame");
        for (i = 1; i < 6; i++) {
          caption = "ボタン" + i;
          elem.insertAdjacentHTML('beforeend', '<input type="button" value=' + caption + '></input>&nbsp;');
        }
      }
    </script>
</head>
<body>
  <h2>JavaScriptによるボタンの動的生成</h2>
  <a href="javascript:Exec();">クリックで実行</a>
  <hr />
  <div id="OutFrame">
  </div>
</body>
</html>