JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptの.createElement()で要素を追加して.insertBefore()で挿入

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

.createElement()

JavaScriptの.createElement()で要素を追加して.insertBefore()で挿入

JavaScriptの.createElement()で要素を追加して.insertBefore()で挿入

.createElement()は、JavaScript だけで DOM を生成して描画するメソッドです。

このメソッドを使って要素を生成しただけでは何も描画されないので、.insertBefore() のメソッドと併用して挿入します。

そんなJavaScriptの2つのメソッドを使ったスニペットについて解説していきます。

.createElement()と.insertBefore()

この記事のスニペットでは、.createElement() で要素を追加(生成)して、それを .insertBefore() で指定した箇所に挿入します。

まずは、それぞれのメソッドについて解説します。

.createElement()

JavaScriptの .createElement() は、pdiv などのHTMLタグの要素を追加するメソッドです。

const element = document.createElement(タグ名)

書き方は上記の通りで、「タグ名」にはその名の通りタグを指定して記述します。

.insertBefore()

JavaScriptの .insertBefore() は指定した要素を、子要素として対象要素の前に挿入するメソッドで、以下のように記述します。

element.insertBefore(挿入したい要素, ここで指定した要素の前に要素を挿入);

例えば、「A」と「B」の要素があった場合、「B」の前に「C」を入れるのにこのメソッドを使います。

要素を追加して挿入するサンプル

早速サンプルですが、「要素を追加するボタン」をクリックする毎に、「最初の要素」と「最後の要素」の間に「追加した要素」が、吹き出しの中に追加されていきます。

  • 最初の要素
  • 最後の要素
かかかず
かかかず

下からほわっと表示されるのは、CSSでアニメーションを付けています。

サンプルのコード

<button id="addElement">要素を追加するボタン</button>
<ul id="elementBlock">
  <li id="firstElement">最初の要素</li>
  <li id="lastElement">最後の要素</li>
</ul>

JavaScriptは、「ボタンクリックで発火 → li タグを追加(生成) → その li タグにclassと中身の文字列を追加 → 親要素と子要素を取得 → 取得した子要素の前に追加(生成)した要素を挿入 」 の流れです。

document.getElementById('addElement').addEventListener('click', () => {
  const element = document.createElement('li');
  element.classList.add('addClass');
  element.innerHTML = '追加した要素';
  const parent = document.getElementById('elementBlock');
  const child2 = document.getElementById('lastElement');
  parent.insertBefore(element, lastElement);
});

.classList.add で「addClass」のclass名を付け 、その中に「追加した要素」の文字列を入れた状態でli タグを追加します。

かかかず
かかかず

記述量は多少ありますが、行毎に分解するとわかりやすい記述(のはず)です。