もりけん塾 JavaScript課題2 JavaScriptでDOMを作りHTMLに挿入する

もりけん塾 JavaScript課題2 JavaScriptでDOMを作りHTMLに挿入する

もりけん塾に入ると、最初に「マークアップエンジニアの方がフロントエンドエンジニアになる為の課題」をやります。皆さんJS課題と呼んでます。今回は、前回の課題1(DOMの生成)に引き続き、JS課題2にチャレンジしたので、まとめたいと思います。

課題1の学習履歴はこちら

お題

このDOMをJavaScriptでつくり、html内のulの中に差し込んでください

<li>
  <a href="1.html"><img src="bookmark.png" alt="ブックマーク" />これです</a>
</li>

私の回答

課題1では、DOMは差し込むだけでしたが、今回はDOMをJavaScriptで作る必要があります。

ちょっと悩みましたが、li要素、a要素、img要素をひとまず作ることにしました。要素を作るコードは、下記のように記述しました。

var li = document.createElement('li');

var a = document.createElement('a');
a.href = '1.html';
a.textContent = 'これです';

var img = document.createElement('img');
img.src = 'bookmark.png';
img.alt = 'ブックマーク';

var ul = document.getElementById('js-list');
ul.appendChild(li).appendChild(a).prepend(img) ;

まず、ここで変数の宣言に、どうして宣言に「var」を使うの?と聞かれました。お仕事でよく「var」で宣言されたプログラム扱っていたため、漠然とvarでいいのかなと思って使いました。

しかし、調べて見ると、「var」はJavaScriptのバージョンが「ES6(ECMAScript6)」というバージョンになる前に使われていた方法とのことで、今ではあまり使われない方法であることがわかりました。

再宣言再代入ブロック
スコープ
関数
スコープ
var×
let×
const××

var,let,constの違いについては、こちらのサイトで詳しく説明がされており、参考にさせて頂きました。

https://tcd-theme.com/2021/04/javascript-let-const.html

修正1

var,let,constの違いを学んだところで、下記のように宣言をconstに変更し、再度レビューしていただくことにしました。

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

const a = document.createElement('a');
a.href = '1.html';
a.textContent = 'これです';

const img = document.createElement('img');
img.src = 'bookmark.png';
img.alt = 'ブックマーク';

const ul = document.getElementById('js-list');
ul.appendChild(li).appendChild(a).prepend(img) ;

修正2

再度、レビューをしていただいたところ、imgの追加だけ、appendChildではなく、prependを使うのは何故なのか質問されました。appendChildだとDOMの順番が変わってしまうから、と答えました。

prependよりも、insertAdjacentElementが一般的と教えて頂いたので、下記のように修正し、今度はapproveしてもらいました!

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

const a = document.createElement('a');
a.href = '1.html';
a.textContent = 'これです';

const img = document.createElement('img');
img.src = 'bookmark.png';
img.alt = 'ブックマーク';

const ul = document.getElementById('js-list');
ul.appendChild(li).appendChild(a).insertAdjacentElement( 'afterbegin', img ) ;

今回学習したこと

  • var,let,constの違い
  • JavaScriptで要素を作る方法
  • HTMLへの要素の追加方法

document.createElementでDOMを作り、.appendChildや.insertAdjacentElementでDOMを追加すすることを学びました。

指定した要素の一番最後に挿入する appendChild

appendChildを使うと、指定した要素の一番最後にHTML要素を挿入することができます。

コードの書き方

// id属性で要素を取得
const ul = document.getElementById('js-list');
// 新しいHTML要素liを作成
const li = document.createElement('li');
// 指定した要素の中の一番最後に挿入
ul.appendChild(li);

HTMLの生成

<ul id="js-list">
    <li></li> //ulの最後にliが挿入された
</ul>

指定した要素の指定箇所に要素を挿入する insertAdjacentElement

指定要素に対して指定した場所に要素を挿入することができます。

コードの書き方

Element.insertAdjacentElement(position, element);

positionに入れる指定と意味

beforebegin直前に挿入する
afterend直後に挿入する
afterbegin最初の子ノードとして挿入する
beforeend最後の子ノードとして挿入する

指定した要素の中にある子要素の前に挿入する insertBefore

insertBeforeは、第二引数で指定した要素の中の子要素の前に、第一引数に指定した要素を挿入することができます。

コードの書き方

// id属性で要素を取得
const ul = document.getElementById('js-list');
var li1 = document.getElementById('li-1');
// 新しいHTML要素liを作成
const li = document.createElement('li');
li.textContent = '追加されました';
// 指定した要素の中の一番最後に挿入
ul.insertBefore(li,li-1);

HTMLの生成

<ul id="js-list">
    <li>追加されました</li>
    <li id="li-1"></li>
</ul>

親要素.insertBefore(追加したい要素, null)にすると、親要素の末尾に挿入することができます。appendChildに似た動きをします。

親要素.insertBefore(追加したい要素, firstChild)にすると、最初の要素として挿入することができます。

今後の課題

DOMの要素の追加方法について曖昧な部分があるので、使いわけできるようにする。

参考にした記事:

https://qiita.com/kouh/items/dfc14d25ccb4e50afe89
https://ja.javascript.info/modifying-document
まい

Webサービス制作会社で、Wordpressのテーマ開発や2Dシミュレーターの開発、JavaScriptを使用したフロントエンド周りの実装を担当しています。 JavaScriptが好きです。 最近は、3D Model Configuratorの制作にチャレンジしています。

その他カテゴリの最新記事