HTMLの操作要素の作成・追加 Javascript初学者講座

前回記事でHTMLの取得方法を勉強したので、今回はその取得したHTMLに対しての操作を勉強していきます。HTML部分は前回使っていたものをそのまま使います。

  <header class="globalHeader">
    <h1 id="globalHeader__heading">JavaScript初学者講座</h1>
    <nav class="globalHeader__navigation">
      <ul class="globalHeader__navigationList">
        <li class="globalHeader__navigationItem globalHeader__navigationItem--about"><a href="" class="globalHeader__navigationLink">講座概要</a></li>
        <li class="globalHeader__navigationItem globalHeader__navigationItem--teacher"><a href="" class="globalHeader__navigationLink">講師紹介</a></li>
        <li class="globalHeader__navigationItem globalHeader__navigationItem--contact"><a href="" class="globalHeader__navigationLink">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>

要素の作成・追加
追加する箇所
1. 指定した要素の前に追加 insertBefore
2. 指定要素の前後に追加 before after
終わりに

要素の作成・追加

まずはJavaScriptのみで要素を作成し、追加する方法を勉強します。HTMLのコードは変数内に文字列で代入してもいいのですが、まずは勉強のためにJavaScriptのプログラムでHTMLを生成してみましょう。

下記のコードはulタグに対していしてaタグを内包したliタグを挿入する他に、classやhrefの付与やテキストの挿入をおこなっています。

// 挿入先の要素を取得
const list = document.querySelector(".globalHeader__navigationList");

// liタグを生成してclassを付与
const listItem = document.createElement("li");
listItem.classList.add("globalHeader__navigationItem", "globalHeader__navigationItem--contact");

// aタグを生成してclassの付与とテキストの挿入、hrefの付与
const listItemLink = document.createElement("a");
listItemLink.className = "globalHeader__navigationLink";
listItemLink.innerText = "ブログ概要";
listItemLink.href = "#";

// liにaタグを挿入
listItem.appendChild(listItemLink);

// 挿入先のリストにタグを挿入
list.appendChild(listItem);

順を追って説明していきましょう。

const list = document.querySelector(".globalHeader__navigationList");

まずこちらのコードではこれから作るHTMLを挿入するリストのul要素を querySelector でclassを指定して取得し、変数へ代入しています。

const listItem = document.createElement("li");
listItem.classList.add("globalHeader__navigationItem", "globalHeader__navigationItem--contact");

続いて、document.createElement メソッドでli要素を生成し、変数 listItem に代入します。さらにその変数 listItem に対して classList.add を使って複数のclassを付与しています。

const listItemLink = document.createElement("a");
listItemLink.className = "globalHeader__navigationLink";
listItemLink.innerText = "ブログ概要";
listItemLink.href = "#";

aタグの要素を作成しclassやhrefの付与、テキストを挿入しています。細かくプログラムの内容を解説すると

className
今回はclass名1つの付与のため className で記述しました。classNameはElementインターフェイスのプロパティで、classの設定や取得をします。

href
こちらも href の設定、取得がプロパティで、hrefに#を設定しています。

innerText
指定された要素に対してテキストを挿入します。

のような流れでaタグの要素を生成しています。

listItem.appendChild(listItemLink);

list.appendChild(listItem);

最後に生成した要素を挿入しています。

appendChild
指定した親要素（list）の子要素の最後に追加するメソッドです。
上記のプログラムではまずa（listItemLink）をli要素に追加し、そのli（listItem）をul要素に追加するといった流れの処理をしています。

このプログラムの結果として「.globalHeader__navigationList」のulの最後にli要素が追加されることになります。
結果のサンプルコードはこちらのリンクになります。

codpen

追加する箇所

ここまでJavaScriptのプログラムで生成したHTMLを、親要素の末尾に追加するといったプログラムを書いてきました。
要件よってには末尾だけでなく指定した要素の最初に追加したい、前後に追加したいといった場合もあるので勉強してきましょう。

指定した要素の前に追加 insertBefore

insertBefore メソッドは親要素内の指定要素の前に挿入します。メソッドに渡す引数は２種類あり下記のように記述します。

親要素.insertBefore(追加する子要素, 指定要素)

ここではサンプルのHTMLのulタグ内の2番目にliタグを追加するプログラムを書きます。

// 挿入先の親要素を取得
const list = document.querySelector(".globalHeader__navigationList");
// 指定要素を取得
const insertListItem = document.querySelector(".globalHeader__navigationItem--teacher");


// liタグを生成してclassを付与
const listItem = document.createElement("li");
listItem.classList.add("globalHeader__navigationItem", "globalHeader__navigationItem--contact");

// aタグを生成してclassの付与とテキストの挿入、hrefの付与
const listItemLink = document.createElement("a");
listItemLink.className = "globalHeader__navigationLink";
listItemLink.innerText = "ブログ概要";
listItemLink.href = "#";

// liにaタグを挿入して子要素の完成
listItem.appendChild(listItemLink);

// 挿入先のリストに子要素を挿入
list.insertBefore(listItem, insertListItem);

指定要素を追加して最後にinsertBeforeメソッドの第２引数として渡しています。これにより「講師紹介」の前に「ブログ概要」のliタグが追加されるようになりました。

appendChildのように親要素の最後があるのであれば、最初に追加するメソッドもあるんじゃないかと思ったのですが、どうやらJavaScriptにそういうメソッドは無いようでした。そのためこのinsertBeforeを使って親要素の最初を実現させます。変更点は4行目の指定要素を決めるところを下記のように変更します。

const insertListItem = list.firstElementChild;

.firstElementChildは要素の最初の子要素を返す、読み取り専用プロパティです。この他にも子要素の順番で指定するプロパティがあったので下記に一覧化します。

.firstElementChild	最初の子要素
.lastElementChild	最後の子要素
.children[n]	n番目の子要素

指定要素の前後に追加 before after

指定した要素の前に挿入するときは before メソッド、後ろに挿入するときは after メソッドを使います。insertBefore メソッドでも出来そうですが、親要素が存在しない場合もあるので覚えておきましょう。

// 指定要素
const insertListItem = document.querySelector(".globalHeader__navigationItem--teacher")


// liタグを生成してclassを付与
const listItem = document.createElement("li");
listItem.classList.add("globalHeader__navigationItem", "globalHeader__navigationItem--contact");

// aタグを生成してclassの付与とテキストの挿入、hrefの付与
const listItemLink = document.createElement("a");
listItemLink.className = "globalHeader__navigationLink";
listItemLink.innerText = "ブログ概要";
listItemLink.href = "#";

// liにaタグを挿入
listItem.appendChild(listItemLink);

// 指定要素の前に直前に挿入
insertListItem.before(listItem);

// 指定要素の後ろに直前に挿入
insertListItem.after(listItem);