Динамическое добавление текстового поля в форму с помощью функции, связанной с кнопкой мыши

Вот что я пытаюсь сделать

Когда я нажимаю кнопку, текстовое поле не добавляется правильно, но у меня есть этот выход вместо этого:

Кроме того, если я пишу текст в текстовом поле, а затем нажимаю кнопку, текст внутри текстового поля (в этом случае электронное письмо) также будет дублироваться, есть ли какой-либо способ избежать этого?

var newtb, reftb

function addElement() {
  newtb = document.getElementById("mail") //***
  reftb = document.getElementById("phone")
  document.getElementById("myForm").insertBefore(newtb, reftb)
}
<form id="myForm">
  <input type="text" id="name" placeholder="Enter your first name"><br><br>
  <input type="text" id="surname" placeholder="Enter your last name"><br><br>
  <input type="email" id="mail" placeholder="Enter your email">
  <input type="button" id="addElementButton" value="+" onclick="addElement()"><br><br>
  <input type="text" id="phone" placeholder="Enter your phone number"><br><br><br>
  <input type="submit" id="submit" placeholder="Enter your phone number">
</form>

1 ответ

  1. Необходимо использовать документ.метод createElement

    var cnt=0;
    function addElement() {
      var reftb = document.getElementById("phone")
      var mail = document.createElement("input");
      mail.type="text";
      mail.id="mail"+(++cnt);
      mail.placeholder="Enter your email"
      document.getElementById("myForm").insertBefore(mail, reftb)
      document.getElementById("myForm").insertBefore(document.createElement("br"), reftb);
    document.getElementById("myForm").insertBefore(document.createElement("br"), reftb);
    
    }
    <form id="myForm">
      <input type="text" id="name" placeholder="Enter your first name"><br><br>
      <input type="text" id="surname" placeholder="Enter your last name"><br><br>
      <input type="email" id="mail" placeholder="Enter your email">
      <input type="button" id="addElementButton" value="+" onclick="addElement()"><br><br>
      <input type="text" id="phone" placeholder="Enter your phone number"><br><br><br>
      <input type="submit" id="submit" placeholder="Enter your phone number">
    </form>