SNSサイト　写真を複数枚投稿できるようにしたい（選択可）

• 画像を追加するボタンが押された時に、新しいファイルフィールドを追加する

views/new.html.erb

<script>
  document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("add-file-field").addEventListener("click", function() {
      const fileField = document.querySelector("input[type='file']");
      const newFileField = fileField.cloneNode();
      fileField.parentNode.insertBefore(newFileField, fileField.nextSibling);
    });
  });
</script>

写真複数投稿できるようになる。
ビューの一番下に記述。

views/new.html.erb

<tr>
 <th>写真</th>
  <td><%= f.file_field :images, multiple: true, accept: 'image/*', class: 'form-control' %></td>
 <td><button type="button" id="add-file-field" class="btn btn-secondary">画像を追加</button></td>
</tr>

画像追加ボタン作る。

• 解説

document.addEventListener("DOMContentLoaded", function() {

ページのDOMが完全に読み込まれた時に関数を実行するイベントリスナーを追加する。これによって、DOM要素を操作できるようになる。

document.getElementById("add-file-field").addEventListener("click", function() {

画像追加ボタン(idがadd-file-field)がクリックされたときに実行されるイベントリスナーを追加している。

const fileField = document.querySelector("input[type='file']");

ページ内の最初のファイルフィールドを取得し、("input type="file")
それを"fileField変数に格納する。

const newFileField = fileField.cloneNode();

すでにある、ファイルフィールドのクローン（コピー）を作成し、
"newField"変数に格納する。
元のファイルフィールドと同じ属性だけど、入力されたファイルはない。

fileField.parentNode.insertBefore(newFileField, fileField.nextSibling);

新しいファイルフィールドを元のファイルフィールド直後に挿入します。
"fileField.parentNode"元のファイルフィールドの親要素を取得する。
"insertBefore(newFileField, fileField.nextSiblung"
新しいファイルフィールドを元のファイルフィールドの次の兄弟要素の前に挿入する。
（画像を追加をクリックすると、間にフィールドが増える）

-　まとめ
1.ページのDONが完全に読み込まれると、関数が実行される
2.画像を追加ボタンがクリックされると

• 現在のファイルフィールドを取得
• クローン作成
• クローンを元のファイルフィールドの直後に追加される

わかるかーい。