【JavaScript】createElementとappendでリストを作る基本

JavaScriptでは、Webページに新しい要素を追加したい場面がよくあります。
その基本的な方法として、createElement で要素を作り、append で既存の要素に追加する手順があります。
本記事では、配列のデータをもとにリストを生成する例を用いながら、この2つのメソッドの基本的な使い方を解説します。

コード
解説

コード

<ul></ul>
<script>
  const members = ['家康', '秀忠', '家光', '家綱', '綱吉'];
  const ul = document.querySelector('ul');

  for (let i = 0; i < members.length; i++) {
    const newLi = document.createElement('li');
    newLi.textContent = members[i];
    ul.append(newLi);
  }
</script>

解説

1. 配列の用意

const members = ['家康', '秀忠', '家光', '家綱', '綱吉'];

ここで、リストに表示したい名前を配列に入れています。

2. <ul> 要素を取得

const ul = document.querySelector('ul');

ページ内の <ul> を JavaScript で使えるように取り出しています。

3. ループで要素を順番に処理

for (let i = 0; i < members.length; i++) {
  const newLi = document.createElement('li');
  newLi.textContent = members[i];
  ul.append(newLi);
}

for 文の仕組み

let i = 0;
→ 配列の何番目の名前を処理しているかを表す番号（インデックス）です。0 から始めます。
i < members.length;
→ 配列の最後まで処理していないかを確認します。配列の要素数より小さい間だけループが続きます。
i++
→ ループが1回終わるごとに i を1増やし、次の名前に移動します。

ループ内の処理

document.createElement('li')
→ 新しいリストの項目を作ります。
newLi.textContent = members[i]
→ 作った項目に配列から取り出した名前を入れます。
ul.append(newLi)
→ <ul> の中に項目を追加します。

<ul>
  <li>家康</li>
  <li>秀忠</li>
  <li>家光</li>
  <li>家綱</li>
  <li>綱吉</li>
</ul>

4. 結果

ページを読み込むと、配列にある5つの名前が順番に <li> として表示されます。

家康
秀忠
家光
家綱
綱吉

まとめ

配列の内容を順番に処理するには for 文を使う
createElement → 新しい要素を作る
textContent → 作った要素に文字を入れる
append → 親要素に追加する

この組み合わせは、配列の内容をHTMLのリストとして順番に表示する基本的な書き方です。

for…of を使っても同じことができる

const members = ['家康', '秀忠', '家光', '家綱', '綱吉'];
const ul = document.querySelector('ul');

for (const member of members) {
  const newLi = document.createElement('li');
  newLi.textContent = member;
  ul.append(newLi);
}

for...of を使うと、インデックスを意識せずに配列の要素を順番に取り出して処理できます。