この記事ではJavaScriptのcreateElement()の使い方を解説します。
この記事の目次
createElement()とは？使い方
createElement()メソッドは、document.createElement(tagName)といった形式で使われます。
引数のtagNameで指定されたHTML要素を生成します。
createElement()を使ったデモ
createElement()を使ったデモとサンプルコードです。
追加ボタンをクリックすると、イベントが発生します。
createElement()を使って、div要素を生成し、appendChild()で追加されています。（参考：「appendChildで要素の追加」）
デモ
サンプルコード
<input type="button" value="追加" onclick="createArea()">
<div id="parent">parentです。</div>function createArea () {
var area = document.createElement('div');
area.id = 'blue';
area.innerHTML = '追加された要素です。';
var parent = document.getElementById('parent');
parent.appendChild(area);
}#parent {
background-color: #eee;
padding: 10px;
}
#blue {
background-color: blue;
padding: 10px;
color: #fff;
}createElement('div')だけでは要素が生成されるだけなので、生成した要素をappendChild()で追加しましょう。
補足：appendChildは末尾、insertBeforeは直前に追加
上記のデモではappendChild()は、末尾に追加しました。
その反対で、特定の要素の直前に追加したい場合には、insertBefore()を使います。
下記の記事で紹介しています。
appendChild()応用編のデモ
先程は、追加するテキストが固定でしたが、今回は「フォームに入力したテキストを追加する」というデモです。
デモ
サンプルコード
<input type="text" id="form" onchange="createInputText()">
<ul id="parent">parentです。</ul>function createInputText () {
var form = document.getElementById("form");
var area = document.createElement('li');
area.id = 'blue';
area.innerHTML = form.value;
var parent = document.getElementById('parent');
parent.appendChild(area);
form.value = '';
}#parent {
background-color: #eee;
padding: 10px;
}
#blue {
background-color: blue;
padding: 10px;
color: #fff;
}
li {
margin: 5px;
}