問題は寝かせるに限るのか
昨日「入力フォームが表示されねえ!」とほざいておりましたが、ふと今になり「"ボタン"を押した際の処理を"ボタン"を指定して組み立ててはいたが"表示場所"ってしっかり指定してたっけ」と思い見返してみたところ、しばしいい加減な場所を指定していたため具体的にしてみたところしっかり表示されました。
main.js
//修正前
const container = document.querySelector(".container-fluid");
container.appendChild(form);
//修正後
fileList.appendChild(form);
//補足:fileList = document.getElementById("file-list");
//file-listは事前にHTMLに設けておいた<div class="list-group" id="file-list"></div>です。
問題の本質は今もイマイチピンときていませんがやはりレイアウトが被っていたのだろうか。
デザインソフトのように階層わけ?されてるイメージなんですかね。表示されるものが被っている場合はどちらを優先して全面に出すのか、その優先順位への理解が足りていないのが原因なのでしょう。
ブラウザの開発ツールをもっとしっかり活用できていればもっと素早く問題の原因に気づけていたんでしょうねぇ。