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

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

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

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

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

 <div class="word_wrapper"></div>

  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で形を整える

 .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;
  }

完成

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

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

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

textContentで値を表示させる。