Question

我有一个按钮，它可以显示更多字段，以获取有关用户的补充信息（他的地址和他的电子邮件）。好吧，当我单击添加字段的按钮时，麻烦在于它们的位置，我希望它位于按钮上方而不是下方

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>

Answer 1

您可以使用insertBefore代替appendChild。它需要第二个参数，在您的情况下应为button元素。

为了获得对按钮的引用，我将通过脚本而不是通过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>

如何在javascript中动态创建的另一个元素之上添加元素

1 个答案: