JavaScript

createElement()の使い方・デモ【JavaScript】

この記事では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()を使います。

下記の記事で紹介しています。

特定の要素の直前に追加【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;
}


ウェブつくを支えてくれるスポンサー

  • この記事を書いた人
ウェブつく管理人

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。

-JavaScript

© 2020 ウェブつく Powered by AFFINGER5