Как добавить элемент поверх другого элемента, который был динамически создан в JavaScript - PullRequest
Новая
       0

Как добавить элемент поверх другого элемента, который был динамически создан в JavaScript

0 голосов
/ 03 марта 2019

У меня есть кнопка, позволяющая отобразить больше полей, чтобы получить дополнительную информацию о пользователе (его адрес и адрес электронной почты).хорошо, когда я нажимаю на кнопку, она добавляет поля, проблема с их позициями, я хочу, чтобы она была над кнопкой, а не под ней

enter image description here

вот код

<html>

<head>
  <script>
    function addUser() {
      let position2 = document.getElementById("position2");

      var name = document.createElement("label");
      position2.appendChild(document.createTextNode("name"));

      var inputName = document.createElement("input");
      inputName.setAttribute("type", "text");
      position2.appendChild(inputName);

      var retuurn = document.createElement("br");
      position2.appendChild(retuurn);


      var btn = document.createElement("input");
      btn.setAttribute("type", "button");
      btn.setAttribute("value", "add informations");
      btn.setAttribute("onclick", "showMore()");
      position2.appendChild(btn);
      position2.appendChild(document.createElement("br"));
      position2.appendChild(document.createElement("br"));
      position2.appendChild(document.createElement("br"));
    }



    function showMore() {
      var adress = document.createElement("label");
      position2.appendChild(document.createTextNode("adress"));

      var inputAdress = document.createElement("input");
      inputAdress.setAttribute("type", "text");
      position2.appendChild(inputAdress);
      var retuurn = document.createElement("br");
      position2.appendChild(retuurn);

      var email = document.createElement("label");
      position2.appendChild(document.createTextNode("email"));

      var inputEmail = document.createElement("input");
      inputEmail.setAttribute("type", "text");
      position2.appendChild(inputEmail);

      var retuurn = document.createElement("br");
      position2.appendChild(retuurn);
      var retuurn = document.createElement("br");
      position2.appendChild(retuurn);
    }
  </script>
</head>

<body>
  <form id="form">

    <div id="position2"></div>

    <button type="button" onclick="addUser()"> click to add user </button> <br><br>

  </form>
</body>

</html>

1 Ответ

0 голосов
/ 03 марта 2019

Вы можете использовать insertBefore вместо appendChild.Требуется второй аргумент, который в вашем случае должен быть элементом кнопки.

Чтобы получить ссылку на кнопку, я бы связал обработчик нажатия кнопки через скрипт, а не через атрибут onclick.Затем обработчик получит объект события, у которого есть кнопка в свойстве target.

Об изменениях см. Ниже: 

<html>

<head>
  <script>
    function addUser() {
      let position2 = document.getElementById("position2");

      var name = document.createElement("label");
      position2.appendChild(document.createTextNode("name"));

      var inputName = document.createElement("input");
      inputName.setAttribute("type", "text");
      position2.appendChild(inputName);

      var retuurn = document.createElement("br");
      position2.appendChild(retuurn);


      var btn = document.createElement("input");
      btn.setAttribute("type", "button");
      btn.setAttribute("value", "add informations");
      btn.onclick = showMore; // <----
      position2.appendChild(btn);
      position2.appendChild(document.createElement("br"));
      position2.appendChild(document.createElement("br"));
      position2.appendChild(document.createElement("br"));
    }



    function showMore(e) { // <--- argument
      var btn = e.target; // <--- get button
      var adress = document.createElement("label");
      // call insertBefore with second argument
      position2.insertBefore(document.createTextNode("adress"), btn);

      var inputAdress = document.createElement("input");
      inputAdress.setAttribute("type", "text");
      position2.insertBefore(inputAdress, btn);
      var retuurn = document.createElement("br");
      position2.insertBefore(retuurn, btn);

      var email = document.createElement("label");
      position2.insertBefore(document.createTextNode("email"), btn);

      var inputEmail = document.createElement("input");
      inputEmail.setAttribute("type", "text");
      position2.insertBefore(inputEmail, btn);

      var retuurn = document.createElement("br");
      position2.insertBefore(retuurn, btn);
      var retuurn = document.createElement("br");
      position2.insertBefore(retuurn, btn);

      btn.setAttribute('disabled', 'disabled');
    }
  </script>
</head>

<body>
  <form id="form">

    <div id="position2"></div>

    <button type="button" onclick="addUser()"> click to add user </button> <br><br>

  </form>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...