Javascript-форум - Функция, создающая новое поле 'input'

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Функция, создающая новое поле 'input' (https://javascript.ru/forum/misc/33624-funkciya-sozdayushhaya-novoe-pole-%27input%27.html)

Функция, создающая новое поле 'input'

Здравствуйте!
Я только начинаю пробовать разбираться с javascript и с программированием в целом, поэтому заранее извиняюсь за кривые коды.
Задача такая: мне необходимо при клике на определенную кнопку создать новое поле загрузки картинки на сервер. Так же я хочу, чтобы поля выводили в столбик, т.е. под друг другом.
Сам код:

Код:

<head>
  <title>Загрузка файлов на сервер</title>
</head>
<body>
      <h2><p><b> Форма для загрузки файлов </b></p></h2>
      <form action="http://localhost/add.php" id = "frm" method="post" enctype="multipart/form-data" name="firstform">
      <input type="button" value='Добавить поле' onclick="newInput()"> <br>
      <input type="file" name="fname[]"><br> 
      <input type="submit" value="Загрузить" id="firstinput"><br>
      </form>

<script language="JavaScript">

function newInput() {
  var firstform = document.getElementsById('frm')
  var m=firstform.getElementsById('firstinput')
  var newinput = document.createElement('input')
  newinput.type = "file"
  newinput.name = "fname[]"
  firstform.insertBefore( newinput, m)
  
}
</script>
</body>

В этом случае ничего не выходит, поля не добавляются вообще.
Если я использую такой фрагмент:

function newInput() {
    myform = document.forms['myform']
    newinput = document.createElement('input')
    newinput.type = "file"
    newinput.name = "input[]"
    myform.appendChild(newinput)
}

то все прекрасно создается,но поля выводятся не так как мне нужно.
Первое добавляемое поле появляется по кнопкой "загрузить", а следующие справа от него и так далее.

Что не так в первом коде? Как же мне всё-таки расположить их под друг другом?

Заранее спасибо!

Escargot,
А точку с запятой в конце каждой строки кто будет ставить за тебя ??? И метод правильно называется getElementById, есть только у документа.

function newInput() {
	  var firstform = document.getElementById('frm');
	  var m=document.getElementById('firstinput');
	  var newinput = document.createElement('input');
	  newinput.type = "file";
	  newinput.name = "fname[]";
	  firstform.insertBefore( newinput, m);
	}

Escargot,

<head>
  <title>Загрузка файлов на сервер</title>
</head>
<body>
      <h2><p><b> Форма для загрузки файлов </b></p></h2>
      <form action="http://localhost/add.php" id="frm" method="post" enctype="multipart/form-data" name="firstform">
      <input type="button" value='Добавить поле' onclick="newInput()"> <br>
      <input type="file" name="fname[]"><br>
      <input type="submit" value="Загрузить" id="firstinput"><br>
      </form>
 
<script language="JavaScript">
 
function newInput() {
  var firstform = document.getElementById('frm');
  var newinput = document.createElement('input');
  var br = document.createElement("br");
  newinput.type = "file";
  newinput.name = "fname[]";
  firstform.appendChild(newinput); firstform.appendChild(br);
}
</script>
</body>

Hoshinokoe, на сколько я читала, можно не использовать точки с запятой, разве нет? По крайней мере, без них всё работает.
На счет метода - с буквой просто описалась, про сам метод почитаю повнимательнее.
lord2kim, спасибо! Даже не подумала о этом.