JavaScriptを用いてdiv要素の中に項目を格納したいです

前提・実現したいこと

・JavaScriptを用いて、ボタンを押下すると表示されているデータを表示／削除する機能を作っています。
・「個別削除」ボタンを押下することで、div要素の"data" + i 属性（※i は変数を示します）
で囲んでいる項目関係の情報を削除したいと考えています。
（将来的には指定した行の情報のみを消去したいと考えているので、
document.getElementById("add").innerHTML = "";　のようにtableごと消すのは避けています）

発生している問題・エラーメッセージ

・「個別削除」ボタンを押下することで、データを削除しようとしましたが、消えませんでした。
・原因究明したところ、出力されたHTMLにおいて、div要素の中身が空であることが原因でした。
・そのため、div要素の中に <tbody><tr>…</tr></tbody> までセットしたいと考えています。

HTML
1<table id="add" border="1">
2	<!-- ◆div要素の中身が空になってしまっている◇ -->
3	<div id="data0"></div>
4	
5	<tbody>
6		<tr>
7			<input id="hidden0" type="hidden" value="AAA">
8		</tr>
9		<tr>
10			<td>
11				<input type="text" value="データ0">
12			</td>
13		</tr>
14	</tbody>
15	<!-- ◆div要素の中身が空になってしまっている◇ -->
16	<div id="data1"></div>
17	
18	<tbody>
19		<tr>
20			<input id="hidden1" type="hidden" value="AAA">
21		</tr>
22		<tr>
23			<td>
24				<input type="text" value="データ1">
25			</td>
26		</tr>
27	</tbody>
28	
29	<!-- ◆div要素の中身が空になってしまっている◇ -->
30	<div id="data2"></div>
31	<tbody>
32		<tr>
33			<input id="hidden2" type="hidden" value="AAA">
34		</tr>
35		<tr>
36			<td>
37				<input type="text" value="データ2">
38			</td>
39		</tr>
40	</tbody>
41</table>

該当のソースコード（JavaScript & HTML)

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>データの追加・削除</title>
6</head>
7<script>
8	function insertData(){
9		// 挿入するHTMLを格納するための変数
10		var HTML = '';
11		// 隠し項目の変数（ダミー）
12		xx = new Array(3);
13		xx[0] = "AAA";
14		xx[1] = "BBB";
15		xx[2] = "CCC";
16
17		// ３つのデータをループで取得したい
18		for (var i = 0; i < 3; i = i + 1) {
19			HTML += '<div id = "data' + i + '">';
20
21			// Hidden項目
22			HTML +=	'<tr>';
23			HTML +=		'<input id = "hidden' + i +'" type="hidden" value="' + xx[0] + '">';
24			HTML +=	'</tr>';
25
26			// 画面に表示させる項目
27			HTML += 	'<tr>';
28			HTML += 		'<td>';
29			HTML += 			'<input type = "text" value="データ' + i +'">';
30			HTML += 		'</td>';
31			HTML += 	'</tr>';
32			HTML += '</div>';
33		}
34
35		// HTMLを動的に組み込む
36		document.getElementById("add").innerHTML += HTML;
37		return;
38	}
39
40	function deleteAllData(){
41		// 埋め込まれたHTMLを削除する
42		document.getElementById("add").innerHTML = "";
43		return;
44	}
45
46	function deleteOneData(){
47		// 将来的には指定された行のみ処理できるようにしたいので、
48		// 今回は１行ずつループで削除していく
49
50		for (var i = 0; i < 3; i = i + 1) {
51			document.getElementById("data" + i ).innerHTML = "";
52		}
53		return;
54	}
55
56</script>
57<body>
58
59	<input id ="button1" type="button" value="１件追加" onclick="insertData()"><br>
60	<input id ="button2" type="button" value="全削除" onclick="deleteAllData()"><br>
61	<input id ="button3" type="button" value="個別削除" onclick="deleteOneData()"><br>
62
63	<!-- この要素の中にJavaScriptで作ったHTMLを組み込む -->
64	<table id ="add" border = "1">
65	</table>
66</body>
67</html>

試したこと

・当初はdiv要素でなく、span要素で囲もうとしましたが、上手くいきませんでした。
調査すると、インライン要素内にブロック要素を入れることは許されないので、
ブロック要素内にブロック要素を入れることにしましたが、上記の問題に直面し、上手く進みませんでした。

補足情報（FW/ツールのバージョンなど）

・原因究明はChromeのデベロッパーツールで行いました。
・隠し項目がきちんとセットされていることは確認済です。

何卒宜しくお願い致します。

kei344

2019/01/11 02:35

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。

yamamoto_nara

2019/01/11 02:37

フォローありがとうございます。対応します。

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

回答1件

ベストアンサー

div要素の中に <tbody><tr>…</tr></tbody> までセットしたいと考えています。

table直下にdivは文法的におかしいです。やるとしたら tbody では。

【<table>: 表要素 | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/table

**許可されている内容 **
以下の順となる。

任意の 1 個の <caption> 要素

0 個以上の <colgroup> 要素

任意の 1 個の <thead> 要素

次の 2 つの選択肢から 1 つ:

0 個以上の <tbody> 要素

1 個以上の <tr> 要素

任意の 1 個の <tfoot> 要素