JavaScriptでDOM生成・挿入してみる

前回、JavaScriptでDOM操作してみるという記事を書いたのですが、今回はDOM生成を行っていきたいと思います。

前回の記事 micche-labo.hatenablog.com

DOM生成とは

JavaScriptでHTMLタグを作ること。

HTMLをJavaScript内に挿入するコードとセットで使う。

DOM生成のしかた

まずはタグを生成。
createElement('')で、すきなタグを作ります。

今回はボタンを作っていこうと思います。

ボタンを作る

const button = document.createElement('button');

こういうやつ→ができました。
このままでは文字がないので何も押せません。

ボタンに文字を入れる

文字をいれましょう。

button.innerText = 'ボタン';

ボタン←こんな感じになります。

押したらポップアップでるようにする

このままだと押しても何にもならないので、押した時にアラートがでるようにします。

button.onclick = ()=>{
  alert('クリックされました。');
};

ここまでで押したらアラートが出るボタンタグが生成できました。

しかし、まだ画面上にはなにもありません。
つくったタグ(DOM)を、画面上に挿入していきます。

DOM挿入

DOM挿入用のコードは、相対的な位置に配置できる

insertAdjacentElement()を使っていきます。

()の中は、('position',element)となります。

Position一覧

挿入位置は、

• beforebegin
• afterbegin
• beforeend
• afterend

の4種類。

相対位置なので、まずhtmlタグを用意。

<div class="box">
 <div class="inner">
 </div>
</div>

みたいなボックスがあるとする。

div.boxに対して入れる場所を指示するとする。

const box = document.querySelector('.box'); //div.box取得

box.insertAdjacentElement('beforebegin', button); //beforebegin

box.insertAdjacentElement('afterbegin', button); //afterbegin

box.insertAdjacentElement('beforeend', button); //beforeend

box.insertAdjacentElement('afterend', button); //afterend

とすると、HTML上では、

<!--beforebegin-->
<div class="box">
<!--afterbegin-->
 <div class="inner">
 </div>
<!--beforend-->
</div>
<!--afterend-->

のように、コメントアウトした箇所にそれぞれボタンが生成されることになる。

生成したボタンを挿入する

よって、例えばafterbeginを使うとすると、挿入するには、

const box = document.querySelector('.box');
box.insertAdjacentElement('afterbegin', button);

と記述する。

完成

ボタンタグが無事挿入されていれば成功です。

chromeのWeb Makerとかで試してみてください。

もちろん、ボタンタグだけでなく、imgとかもできます。

DOM生成とDOM挿入のサンプル

全ての位置に挿入したサンプルはこちら。

See the Pen DOM操作練習用 by Micche (@micche) on CodePen.

参考になれば嬉しいです。