【JavaScript入門】ページ内の要素にイベントを設定する！

何かボタンをクリックする度にページ内の要素を書き換えることができます。

まず、ボタンを配置します。

<button id="add">Click!</button>

document.getElementById('add')で button を取得し、 addEventListenerでイベントを割り当てます。addEventListenerは第 1 引数にはイベントの種類を指定、第２引数には関数で指定します。第 1 引数のイベントの種類は様々ありますが、ボタンをクリックするイベントの場合は「’click’」を指定します。

document.getElementById('add').addEventListener('click', function(){
var greet = document.createElement('p');
text = document.createTextNode('Hello world');
document.body.appendChild(greet).appendChild(text);
} );