webコーダーのsaco @sacocco_sacoya です。
所属しているもりけん塾にてマークアップエンジニアの方がフロントエンドエンジニアになる為の課題2に挑戦しました。
備忘録＆勉強になったことをまとめていきます。

課題内容

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

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

作成手順

• <ul>の取得
• <li>の作成
• <img>の作成
• <img>にsrc属性を追加
• <img>にalt属性を追加
• <a>の作成
• <a>にhref属性を追加
• <a>に<img>を挿入
• <img>の後ろ（<a>の最後の子要素の後ろ）に「これです」テキストを追加
• <li>に<a>を挿入
• <ul>に<li>を挿入

提出コード

//get:ID='js-lists'
const ul = document.getElementById('js-lists');
//create <li>
const li = document.createElement('li');

//create <img>
const image = document.createElement('img');
//add src attribute
image.src = 'bookmark.png';
//add alt attribute
image.alt = 'ブックマーク';

//create <a>
const link = document.createElement('a');
//add href attribute
link.href = '1.html';

//add img to <a>
link.appendChild(image);

//create text 
const text = 'これです';
//Add text after the last child element within the <a> element
link.insertAdjacentHTML("beforeend",text);

//add link to li
li.appendChild(link);

//add li to ul
ul.appendChild(li);

プルリクエスト＆レビューにて勉強になったこと

ul.appendChild(li).appendChild(link).insertAdjacentHTML("beforeend",text);

はせがわさん @starsurferzに教えていただいた記述方法で、メソッドチェーンで記述することもできると知りました！
ul、li、link、textを連続して一行で書けるのがスッキリしていていいなと思いました。

はせがわさん、教えていただきありがとうございました。

疑問に思った点について

2通りの属性の追加方法

属性を追加するには、setAttributeを利用する方法と、プロパティを直接設定する方法の2通りがあることに気がつきました。それぞれの特徴を調べました。

setAttributeを使う場合のメリット・デメリット

image.setAttribute('src', 'bookmark.png');

メリットは、すべての属性に対して使用できるため、カスタム属性などにも対応可能であること。
DOM操作として標準的な方法のため、他の開発者にとって理解しやすいメソッドであること。

デメリットは、コード記述が冗長になること。

プロパティに直接値を設定する場合のメリット・デメリット

image.src = 'bookmark.png';

メリットは、コードがシンプルで直感的であること。パフォーマンス上、若干高速であること。
デメリットは、一部の属性（カスタム属性やデータ属性など）には適用できないこと。

今回の課題においては、カスタム属性などを利用しないため、後者のプロパティに直接値を設定する方法を選びました。

備忘録

以下、課題に取り組むにあたって調べたことの備忘録です。

要素を作成するメソッド

createElement()

引数に生成したい要素名（タグ名）を指定することでタグを作成できる。

insertAdjacentHTML()

第2パラメータに渡したHTMLコードを、第1パラメータで指定した位置に追加できる。
また、1つのHTMLコードで複数のHTML要素を追加することができる。
読み方は、インサートアジェイセント。

element.insertAdjacentHTML("挿入箇所", 挿入HTMLコード);

配置箇所は4種類ある。

• beforebegen
  指定したelementの手前
• afterbegin
  指定したelement内の最初の子要素の手前
• beforeend
  指定したelement内の最後の子要素の後ろ
• afterend
  指定したelementの後ろ

複数HTML要素を追加するときは、変数にHTML要素を含む文字列を用意して、その変数をinsertAdjacentHTMLへ渡す。

var cnt = document.getElementById('container');

//複数のHTML要素を含む文字列を用紙
var htmlString = `
<p>テスト</p>
<a href="">テスト</a>
<span>テスト</span>
`:

cnt.insertAdjacentHTML('beforeend',htmlString);

属性を追加するメソッド

setAttribute()

指定した要素に属性を追加する/既存の属性を変更することができる。

//src="bookmark.png"
image.setAttribute("src","bookmark.png");
//alt="ブックマーク"
image.setAttribute("alt","ブックマーク");

メリット・デメリットはこの章を参考。

感想

主にレビューをしてくださったはせがわさん @starsurferz、もりけんさん @terrace_tech、記事を参考にさせていただいたはるさん @fuwafuwahappy、さえ @sae_progさん、ありがとうございました。

もりけん塾とは？

フロントエンドエンジニアを目指す方の無料コミュニティ「もりけん塾」。
「無料でJavaScript教え合うフロントエンドコミニュティ」です。

詳しくはこちら↓↓
https://kenjimorita.jp/morikenjuku

もりけん先生のTwitter↓↓
https://twitter.com/terrace_tech

参考記事・動画

新しいHTML要素を作成する | GRAYCODE JavaScript
https://gray-code.com/javascript/create-new-html-element/

innerHTML より insertAdjacentHTML を使う #JavaScript – Qiita
https://qiita.com/amamamaou/items/624c22adec32515e863b

【もりけん塾】JavaScript課題2で学んだことまとめ | <>haru log
https://happy-making.com/javascript-lesson02/

【もりけん塾】#JS課題1・2 | フロントエンドエンジニアの積み上げブログ
https://itosae.com/archives/541