質問: ### 前提・実現したいこと javascriptを使って、縦型の社員のシフト管理スケジュールを作っています。 わけあって少し独学でHTMLをかじった程度の素人が突然1人で開発することになりとても苦労しています。。。 初めてでコードが汚く、また勉強しながらなので無駄なコードもあるかもしれませんがご容赦ください。 日付を縦1列で表示し、その隣に曜日を表示を表示させたいのですが、曜日の表示がうまくできません。 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 ### 該当のソースコード ``` シフト管理 ```
回答: こんにちは、kty000さん 慣れない開発の仕事とのことで、ご苦労さまです。 以下に、例として、コードを更新してみました。 ``` ...(省略)... //日付を1つづつ出力 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生成するのではなく、一旦手打ちでタグを入力してみて、生成する順序を考えるとわかりやすいです。 今回の条件ですと 1. 縦に日付を並べる 2. その横に曜日を並べる とのことなので、以下のようになると思います。 (ちなみに、はテーブルの見出しセルを示すものなので、今回の条件にはそぐわないです。) (参考) http://www.htmq.com/html/th.shtml ``` 1日 2火 ...(省略) ``` そのため、このタグを構成する場合の思考の流れは、 1. tableにappendChildする必要がある 2. trタグを順番に追加していく必要がある 3. trタグの中身は日付・曜日だ 4. では、日付と曜日のタグつくり、trにappendChildし、trをtableにappendChildしよう 5. この内容を日付分、ループを回そう という感じだと思います。 以上、参考になれば、幸いです。 開発頑張ってください!応援しています💪