JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【初心者向け】バニラJavaScriptでボタンクリック時に配列の要素をdivに表示する方法

バニラJavaScript(ライブラリやフレームワークに依存しない素のJavaScript)を使って、配列の要素をdiv要素の中に表示するのはとても簡単です。基本的な考え方は、配列を反復処理しながら、各要素を順番にdivへ追加していくというシンプルなものです。

具体的には、次のように実装できます。

基本的なコード例

const myArray = ["stone", "paper", "scissors"];
const embedElements = () => {
    myArray.forEach(element => {
        document.getElementById('result').innerHTML +=
            `<div>${element}</div><br />`;
        // ここでの「result」は、DOM内に存在するdivのid
    });
};

このコードでは、配列の要素を表示したいdivに id="result" が設定されていることを前提としています。innerHTML に対して += で文字列を追記することで、既存の内容を保持しながら新しい要素を末尾に追加していきます。

続いて、この処理を実際に動作させるための完全なHTMLコードを見てみましょう。

完全なコード例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>配列の要素をdivに表示する</title>
</head>
<body>
    <div id="result"></div>
    <button onclick="embedElements()">データを表示</button>
<script>
{
    const myArray = ["stone", "paper", "scissors"];
    function embedElements(){
        myArray.forEach(el => {
            document.getElementById('result').innerHTML += `<div>${el}</div><br />`;
            // ここでの「result」は、DOM内に存在するdivのid
        });
    };
}
</script>
</body>
</html>

出力結果

【初心者向け】バニラJavaScriptでボタンクリック時に配列の要素をdivに表示する方法

上記のページで「データを表示」ボタンをクリックすると、配列の各要素がdivの中に1行ずつ次のように表示されます。

【初心者向け】バニラJavaScriptでボタンクリック時に配列の要素をdivに表示する方法

補足:より安全で高速な書き方のポイント

ループ内で innerHTML += を繰り返し呼び出すと、追加のたびにHTML全体が再解析されるため、要素数が多い場合にはパフォーマンスが低下します。そのようなケースでは、あらかじめ文字列を組み立ててから一度だけ代入する方法がおすすめです。

// 文字列を組み立ててから一括代入する例
const html = myArray.map(el => `<div>${el}</div>`).join('');
document.getElementById('result').innerHTML = html;

また、ユーザー入力など信頼できないデータをそのまま innerHTML に挿入すると、クロスサイトスクリプティング(XSS)のリスクがあります。外部由来の値を表示する場合は textContent や createElement() を使うと安全です。

  1. ボタンクリック時にJavaScriptでdivを非表示にする方法をわかりやすく解説

    Webページを作成していると、ボタンをクリックしたタイミングで特定の要素を表示・非表示に切り替えたい場面はよくあります。この記事では、JavaScriptのstyle.displayを使って、ボタンクリック時にdiv要素を非表示にする方法を具体的なコード例とともに解説します。基本となるdiv要素の準備まず、操作対象となる以下のようなdiv要素を用意します。<div id=showOrHide> Welcome in JavaScript </div>次に、クリックすると上記のdivが非表示になるボタンを配置します。onclick属性に関数名を指定するのがポイントです。&

  2. 【初心者向け】ボタンクリックでJavaScript配列の要素を逆順に1つずつ表示する方法

    JavaScriptの配列を逆順に1つずつ表示するには？ 本記事では、ボタンをクリックするたびに、JavaScriptの配列要素を後ろから順に（逆順で）1つずつ表示する方法を解説します。 まず、次のような配列を例として用意しました。 var listOfNames = [    John,    David,    Bob ]; そして、クリックすると配列の値を逆順に取得できるボタンは以下のとおりです。 <button id="reverse" onclick="rev