javascriptでシフト管理スケジュールを制作したい

前提・実現したいこと

javascriptを使って、縦型の社員のシフト管理スケジュールを作っています。
わけあって少し独学でHTMLをかじった程度の素人が突然１人で開発することになりとても苦労しています。。。
初めてでコードが汚く、また勉強しながらなので無駄なコードもあるかもしれませんがご容赦ください。

日付を縦１列で表示し、その隣に曜日を表示を表示させたいのですが、曜日の表示がうまくできません。
appendChildがうまくできずエラーになっているみたいなのですがどのようにすればよいかお力添えいただけると助かります。よろしくお願いします。

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

DOMException: Failed to execute 'appendChild' on 'Node': The new child element contains the parent

DOMException: Failed to execute 'appendChild' on 'Node': The new child element contains the parent

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="uft-8">
6  <title>シフト管理</title>
7</head>
8
9<body>
10  <div id="title">
11  </div>
12
13  <table border="1" id="calender">
14  </table>
15
16  <script type="text/javascript">
17    const now = new Date();                                        //データ取得
18    var year = now.getFullYear();                                  //年の取得
19    var month = (now.getMonth() + 1);                                //月の取得（0〜１１月）
20    var today = now.getDate();                                     //日付の取得
21    console.log("今日：", year, "年", month, "月", today, "日");
22
23
24    var weekTbl = new Array("日", "月", "火", "水", "木", "金", "土");     //曜日定義
25    var week = weekTbl[now.getDay()];                             //漢字で曜日を取得
26    console.log("曜日：", weekTbl[now.getDay()]);
27
28
29    now.setDate(1);                                               //月初の１日をセット
30    var startYear = now.getFullYear()                             //月初の年取得
31    var startMonth = now.getMonth() + 1                             //月初の月取得
32    var startDate = now.getDate()                                 //月初の日付取得
33    var startWeek = weekTbl[now.getDay()]　　　　　　　　　　　　　　　//月初の曜日
34    console.log("月初：", startYear, "年", startMonth, "月", startDate, "日", startWeek, "曜日")
35
36
37    var endMonthly = new Date(now.getFullYear(), now.getMonth() + 1, 0)//月末の計算（0日は１日の１つ前の日付）
38    var endYear = endMonthly.getFullYear()                         //月末の年取得
39    var endMonth = endMonthly.getMonth() + 1                         //月末の月取得
40    var endDate = endMonthly.getDate()                             //月末の日付取得
41    var endWeek = weekTbl[endMonthly.getDay()]                     //月末の曜日取得
42    console.log("月末：", endYear, "年", endMonth, "月", endDate, "日", endWeek, "曜日")
43
44
45
46
47    // カレンダーの表示
48    document.getElementById("title").append(year, "年", month, "月");
49
50    var table = document.getElementById("calender")
51
52    //日付を１つづつ出力
53    for (var n = startDate; n <= endDate; n++) {
54      var i = 0
55      var trAdd = document.createElement("tr")　　　　　　　　　　　//trを新しく追加
56      var tr = document.getElementsByTagName("tr")　　　　　　　　　//bodyのtrを取得
57      var thAdd = document.createElement("th")　　　　　　　　　　　//thを新しく追加
58      thAdd.textContent = n　　　　　　　　　　　　　　　　　　　　　　　//n(日付)をthに記述
59      trAdd.appendChild(thAdd)　　　　　　　　　　　　　　　　　　　　　//trを取得して子要素としてthを追加
60      table.appendChild(trAdd)　　　　　　　　　　　　　　　　　　　　　//tableの最後にtrを追加
61      for (i = 0; i <= n; i++){
62        var date = document.getElementsByTagName("th")       //bodyのth(日付)を取得
63        date[i].appendChild(thAdd)
64      }
65    }
66
67
68  //従業員名を取得し<td>で１つづつ追加するコードを記述する
69
70  </script>
71</body>
72
73</html>

H40831

2019/12/25 12:24

HTMLとJavaScriptだけですと、複数人でデータを共有することはできませんが、その点は解決されてるのでしょうか？

kty000

2019/12/26 01:16

実はそのあたりはまだどうしようか悩んでいます;-; 勉強不足ながらも作れと言われているのでできそうなところから少しづつやっています。 pythonを少し勉強したので、それを使ってデータベース？を作ってそこにシフト内容を登録し、jsをつかってそれぞれのアカウントで呼び出したりしてできないかなぁとぼんやり考えています（できるかは不明ですが）

H40831

2019/12/26 01:55 編集

条件や規模次第でいろんなやり方が考えられます。しかし、仰る方法でやるにしろ、他の方法でやるにしろ、勉強しなければいけないこと、勉強しても実践してみなければわからないメリットやデメリットなどあると思います。１人で作り上げるのは難しいので、MENTAなどで導いてくれる先生を見つけるのも有りだと思います。回答になってなくてすみませんでした。

kty000

2019/12/26 02:10

MENTAというサービスを知らなかったので、教えていただいてありがとうございます、調べてみます！勉強しながらがんばってみます＾＾

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

回答1件

ベストアンサー

こんにちは、kty000さん

慣れない開発の仕事とのことで、ご苦労さまです。
以下に、例として、コードを更新してみました。

...（省略）...

    //日付を１つづつ出力
    for (var n = startDate; n <= endDate; n++) {
      var tr = document.createElement('tr'); // 横1行のタグを生成する ... (1)
      var tdDate = document.createElement('td'); // 縦1列目のタグ（日付）を生成する ... (2)
      var tdDay = document.createElement('td'); // 縦2列目のタグ（曜日）を生成する ... (3)

      now.setDate(n); // Dateオブジェクトを n の日付に更新する

      tdDate.textContent = n; // 日付を値としてセットする
      tdDay.textContent = weekTbl[now.getDay()]; // 曜日を値としてセットする

      tr.appendChild(tdDate); // (1)の子要素として(2)を追加する
      tr.appendChild(tdDay); // (1)の子要素として(3)を追加する

      table.appendChild(tr); // (2)と(3)の子要素を保持した(1)をtableタグの子要素として追加する
    }

...（省略）...

JavaScriptでタグを生成する場合は、いきなりJS生成するのではなく、一旦手打ちでタグを入力してみて、生成する順序を考えるとわかりやすいです。

今回の条件ですと

縦に日付を並べる
その横に曜日を並べる

とのことなので、以下のようになると思います。
（ちなみに、<th>はテーブルの見出しセルを示すものなので、今回の条件にはそぐわないです。）
(参考） http://www.htmq.com/html/th.shtml

    <table border="1" id="calender">
      <tr>
        <td>1</td><td>日</td>
      </tr>
      <tr>
        <td>2</td><td>火</td>
      </tr>

      ...（省略）

    </table>

そのため、このタグを構成する場合の思考の流れは、