【JavaScript】for文を使って動的にtableの行を追加する方法

先日、後輩君にヘルプされた時に書いたコードのご紹介です。
要望としては、データを for 文でまわして、table 要素にデータを動的に追加したいとのことでした。
コード自体はそこまで苦労することなく掛けたのですが、今後もし使うことがあった時用のコピー元として、簡単にまとめます。

参考にさせていただいた記事はこちら。

javascriptでtableをループ その2-2 – Qiita
https://qiita.com/izcomaco/items/7ef5a08a9c542d84907b

参考に…というか、ほぼこちらのコードをまるっとコピーさせていただきました。

元となる table 要素はこちら。
とりあえずサンプルとして、項目が3つあるテーブルを作成しました。

<table id='data-table'>
  <tr><th>項目1</th><th>項目2</th><th>項目3</th></tr>
</table>

JavaScript のコードは下記のとおりです。
コメントでも書いておりますが、5行分のデータを追加しています。

var tableEle = document.getElementById('data-table');
for (var i = 0; i < 5; i++) {
  // テーブルの行を 5行追加する
  var tr = document.createElement('tr');
  for (var j = 0; j < 3; j++) {
    // テーブルの列を 3行追加する
    var td = document.createElement('td');
    td.innerHTML = 'データ'+(i+1)+"-"+(j+1);
    tr.appendChild(td);
  }
  tableEle.appendChild(tr);
}

要素の追加には .appendChild() を使っています。
こちらは、jQuery の .append() と同じことができるメソッドで、指定した要素の子要素の最後に、文字列や HTML 要素を追加することができます。
サンプルコードでは、8行目と 10行目です。

要素内にテキストを追加する際には .innerHTML() を使用しています。
サンプルコードでは 7行目で .innerHTML() を使って td 要素内に文字列を追加しています。

コードとしては以上です。
実際に使う際には、for..in 文などを使って、実際に table 要素に追加したいデータをまわして実行する方が使いやすいと思います。

以上、JavaScript の for 文などのループ処理を使って、動的に table 要素に行を追加する方法でした。
ご参考になれば幸いです。