フロントエンドブログ

Web制作で役立つフロントエンドの知識を発信しています!

【JavaScript】要素を生成しリストを作ろう

1週刊がやっと終わりましたね(^o^)

今週は忙しい日々でくたくたです(笑)

 

さて今日はJavaScriptを用いてリストを生成する方法をお伝えします。

まずはindex.htmlを用意します。

 

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>lists</title>
</head>
<body>
<ul></ul>

<script>

const ul = document.querySelector("ul");
for(let i = 0;i < 10;i++){
let li = document.createElement('li');
li.textContent = `テスト${i + 1}`;
ul.append(li);
}
</script>
</body>
</html>

HTMLはulタグだけを用意します。

次にscriptタグを記述します。

<script>

const ul = document.querySelector("ul");
for(let i = 0;i < 10;i++){
let li = document.createElement('li');
li.textContent = `テスト${i + 1}`;
ul.append(li);
}
</script>

こちら順に見ていきましょう。

まずliタグを生成する前にulタグを取得します。

ここで取得したulタグにliタグを追加していく流れです。

今回はリストを1から10まで生成します。

for(let i = 0;i < 10;i++){
let li = document.createElement('li');
li.textContent = `テスト${i + 1}`;
ul.append(li);
}

必要回数分、回せばいいのでここではfor文を利用します。

要素を生成するにはcreateElement(生成する要素)を用います。

ここで生成した要素をliタグに格納します。

 

次にliのテキストをtextContentを用いて指定します。

テスト${i}の箇所はiタグを用いて1を足します。これでリストの番号を表現可能です。

 

そして最後に取得していたul要素にapeend()メソッドを用いて追加します。

appendを用いることでul要素の末尾に要素の追加が可能です。

これをfor文で指定した回数分、li要素が追加される仕組みです。

以上でJavaScriptを用いたリスト作成は完了です。

楽天ブックス

ファイル管理にお困りのリモートワーカーへ【Web-luck(ウェブ・ラック)】

 

継続は力なり