Javascript

JavaScriptを使ってdivを生成

JavaScriptを使ってdivを生成していく方法について説明していきます。

  • divの生成
  • 子要素の追加

divの生成

・今回はjavascriptだけでdiv要素を作る方法について学んで行きます。

・この方法を使うことによって例えば同じ要素を100個欲しい場合などにHTMLだと手書きで100個作っていかなければ行きませんがjavascriptだと簡単なコードで作っていくことができます。

・まずはdiv要素を作りたいのでcreateElement()を使ってdiv要素を作っていきます。要素名を渡せばいいのでdocument.createElement('div’);で作ることができます。

・処理をかんたんにするために定数を与えてあげると後々楽です。今回はdivと名前をつけてあげます。const div = document.createElement('div’);としてあげればいいでしょう。

定数を使おう

・次に’div’にboxクラスをつけたいのでクラス属性を与えるためにclass.add()を使ってboxクラスを追加していきましょう。div.classList.add('box’);でいいですね。

CSSクラスの操作

・またaddEventListener()をつけていきます。クリックしたらcircleというクラスを付与したいのと更にクリックしたらもとに戻すという形にしたいのでdiv.addEventListener('click', () => {div.classList.toggle('circle’);});としていきましょう。

コードを詳しく見ていこう

子要素の追加

・完成かと思いきやこれだとdiv要素はできましたが表示がされません。ブラウザに表示したい場合はbodyの子要素として表示してあげる必要があります。

・appendChild()を使えばいいのでdocument.body.appendChild(div);と書いていけばおkです。

・これでbodyの子要素として追加されました。

-Javascript