JavaScriptを使ってHTMLを組みたい

JavaScript
1<!-- ↓これを作りたい↓ -->
2<!-- <table>
3	<tr>
4		<td>1</td>
5		<td>2</td>
6		<td>3</td>
7		<td>4</td>
8	</tr>
9	<tr>
10		<td>5</td>
11		<td>6</td>
12		<td>7</td>
13		<td>8</td>
14	</tr>
15	<tr>
16		<td>9</td>
17		<td>10</td>
18		<td>11</td>
19		<td>12</td>
20	</tr>
21	<tr>
22		<td>13</td>
23		<td>14</td>
24		<td>15</td>
25		<td>16</td>
26	</tr>
27</table> -->

上記のようにJavaScriptを使って作成したいと考えております
ですがまず最小限の

JavaScript
1<tr>
2<td></td>
3<td></td>
4</tr>

こちらを作成したいと思います。

現在はHTMLとJavaScriptを使って

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5	<meta charset="UTF-8">
6	<meta name="viewport" content="width=device-width, initial-scale=1.0">
7	<title>Document</title>
8</head>
9
10<body>
11	<table id="list">
12         <tr>
13          <td></td>
14         </tr>
15	</table>
16
17	<script src="main.js"></script>
18</body>
19
20</html>

JavaScript
1"use strict";
2
3let tr = document.createElement("tr");
4//tr要素作成 タグ名tr
5let td = document.createElement("td");
6//td要素作成 タグ名td
7
8document.getElementById("list").appendChild(tr);
9//id,listをタグ指定 上記で作成したtr要素を追加
10tr.appendChild(td);
11//tr関数を指定してそこにtdを追加する
12

ここまで作成しております。

https://github.com/shingitxx/javascript_test
GitHubはこちらなります

私の行った手順は以下です。
まず検索にて
javascript ノード　複数
javascript ノード　複数
js 要素追加
js 変数　追加
js 変数複数　
このように検索しました。

ここで変数をまとめるarrayを使えば作成したいようにできるのではないか？
っと考えて実装しました。

すると、以下のような結果になりました。
確かにarray変数を作ってやると例えば(1234)のように複数作成することは出来ましたが現在あるtrタグやtdタグを使って増やすやり方にはいたりませんでした。

ヒントや検索方法が間違っているなどアドバイスいただけたらと思いますのでご教授の程よろしくお願いいたします。

PCはMacOSを使っています。

kei344

2020/05/26 12:58

JavaScriptをコードブロックで提示してください。

shinpachi

2020/05/26 13:01

kei344さんコメントありがとうございます！ JavaScriptのコード追加させていただきましたのでご確認よろしくお願いいたします

raccy

2020/05/26 13:37

ReactやjQueryといったなんらかのライブラリを使った方がはるかに簡単にできますが、Vanilla JSでなければならない縛りでもあるのでしょうか？勉強のため？

shinpachi

2020/05/26 13:43

raccyさんコメントありがとうございます！はい！その通りでございます！基礎が出来ておらずライブラリ使うのは少しどうかと個人的に考えておりまして、、

行動規範の内容に同意します

回答4件

数行で済むのに・・・。

js
1<table id="list"></table>
2//___
3
4const ary = [
5  [1,2,3,4], [5,6,7,8], [9,10,11,12], [13,14,15,16]
6];
7
8function a (table, ary) {
9  for (let row of ary) {
10    let tr = table.insertRow ();
11    for (let cell of row)
12      tr.insertCell ().textContent = cell;
13  }
14}
15
16a (list, ary);
17

なんなら１行で

js
1[[1,2,3,4], [5,6,7,8], [9,10,11,12], [13,14,15,16]]
2  .reduce((a,b)=>(b.reduce((c,d)=>(c.insertCell().textContent=d,c),a.insertRow()),a),list);
3

投稿2020/05/26 14:01

編集2020/05/26 14:18

退会済みユーザー

総合スコア0

miyabi_pudding

2020/05/26 14:10

横槍失礼します。 insertRowとinsertCellってそんな便利なメソッドがあったとは・・・。挿入した上で返り値がその要素って、便利すぎませんか。

退会済みユーザー

2020/05/26 14:19

多分１０年ぐらい前からあったような・・・

miyabi_pudding

2020/05/26 14:21

IEも5.5からサポートしてるっぽいですしね。完全に勉強不足だった・・・。

AkitoshiManabe

2020/05/26 20:15

これこそ「正解」に思います。「10年前」といえば、DOMのappendChild() でtableを作成する際、tbodyを含めないとレンダリングされない IE の微妙な実装を思い出しました。

行動規範の内容に同意します

単純にdomとして

javascript
1<script>
2const data=[
3  [ 1, 2, 3, 4],
4  [ 5, 6, 7, 8],
5  [ 9,10,11,12],
6  [13,14,15,16],
7];
8const tbl=[
9  data.reduce(
10    (x,y)=>(x.appendChild(
11      y.reduce(
12        (x,y)=>(x.appendChild(
13          [y].reduce(
14            (x,y)=>(x.appendChild(
15              document.createTextNode(y)
16              ),x),document.createElement('td'))
17          ),x),
18        document.createElement('tr'))
19      ),x),
20    document.createElement('tbody'))
21  ].reduce(
22    (x,y)=>(x.appendChild(y),x),
23    document.createElement('table')
24    );
25window.addEventListener('DOMContentLoaded', ()=>{
26  document.querySelector('#view').appendChild(tbl)
27});
28</script>
29<div id="view"></div>

投稿2020/05/26 14:53

yambejp

総合スコア116835

JavaScriptを使ってHTMLを組みたい

その場合、createElement(), createComment(), createTextNode(), setAttribute(), appendChild() といったDOM操作を繰り返す以外ないです。

マイナーな手法ですが、私はプライベートでは JsonML をよく使います。
ユーザ関数: CODEPEN jsonml2dom()

javascript
1let jml = ["table",
2  ["tr",
3    ["td", "1"],
4    ["td", "2"],
5    ["td", "3"],
6    ["td", "4"]
7  ],
8  ["tr",
9    ["td", "5"],
10    ["td", "6"],
11    ["td", "7"],
12    ["td", "8"]
13  ],
14  ["tr",
15    ["td", "9"],
16    ["td", "10"],
17    ["td", "11"],
18    ["td", "12"]
19  ],
20];
21
22console.log( jsonml2dom(jml) );