石田修二ホームページ　＞　JavaScript講座　＞    （サイト内検索）

動きのあるボタンを作ろう

DOM とイベントを使って動きのあるボタンのプログラムを作ってみよう。具体的にはボタンが押されたタイミングで，文字列を追加してみます。

動的に要素を追加する

HTML文書を丸々 JavaScript で作り上げることもできます。

function addText(event) {
  var box = event.target.parentNode;
  var pNode = document.createElement('p');

  pNode.innerHTML = 'テキストが追加されました';
  box.appendChild(pNode);
}

関数の引数としてeventが指定されています。

document.createElement('p') として，新しく <p> 要素を作成しています。続いて，innerHTML プロパティに追加したい文字列を代入します。

このままでは，要素を追加しただけで，DOMツリーには表示されないので，appendChild() メソッドで，目的の要素の子要素として，DOMツリーに加えます。

  pNode.innerHTML = 'テキストが追加されました';
  box.appendChild(pNode);

変数 box は<div id="box">の要素なので，この要素の子要素として追加されます。これでクリックする度に新しく <p> 要素が追加されていくことになります。

リンクはご自由にどうぞ。

【石田修二トップページ】　　【いろいろ】

Last modified: 2014-04-28 02:13:16