▲TOPへ戻る

【Javascript】配列の中身を一つずつ取り出し、div要素を生成して入れ込む方法

このような配列があったとします。

この中身を一つずつ取り出し、生成したdiv要素の中に入れたいと思います。

javascript
 const wordList = ['働きます','休みます','終わります','寝ます','起きます',
    '勉強します','行きます','帰ります','飲みます','吸います',
    '聞きます','読みます','書きます','買います','撮ります',
    '会います','食べます','見ます','切ります','送ります',
    'もらいます','貸します','習います','あげます','借ります',
    '教えます','かけます','わかります','あります','います',
    'かかります','消します','急ぎます','待ちます','曲がります',
    '持ちます','取ります','手伝います','呼びます','話します',
    '降ります','開けます','閉めます','止めます','見せます',
    '始まります','泳ぎます','入ります','迎えます','疲れます',
    '立ちます','座ります','使います','置きます','作ります',
    '売ります','知ります','住みます','乗ります','浴びます'
 ]

HTMLは1行だけで、この中に埋め込んでいきます。

HTML
 <div class="word_wrapper"></div>
javascript
  const word_wrapper = document.querySelector(".word_wrapper");

    wordList. forEach(function(value){   //配列の数だけ同じ処理をします。
    const box = document.createElement("div");  //divを生成
    word_wrapper.appendChild(box);  //HTMLの子の要素の子要素として生成
    box.className = 'allWord'  //クラス名を指定
    box.textContent = value;   //配列の値を表示する
 });

CSSで形を整える

CSS
 .word_wrapper{
     margin: 0 auto;
     width: 375px;
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
     gap: 3px;
 }
 .word_wrapper .allWord{
     outline: 1px solid #333;
     text-align: center;
 }

完成

point

foreachで配列の数だけ同じ処理を繰り返す。

document.createElement()で要素を生成する。

appendChild()で子要素として埋め込んでいく

textContentで値を表示させる。

profile

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。<