how to add an element on top of another element that have been dynamically created in javascript

Question

I have a button allowing to display more fields in order to get supplementary information about a user(his address & his email). well, when I click on the button it adds the fields, the trouble is with their positions, I want it to be above the button not below it

enter image description here

here is the code

<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>

you are making this complex for your self why don't you create tags in html and show hide them on click event? — Syed Mehtab Hassan
– Syed Mehtab Hassan, Commented Mar 3, 2019 at 10:25

trincot · Accepted Answer · 2019-03-03 11:06:18Z

You can use insertBefore instead of appendChild. It takes a second argument, which in your case should be the button element.

In order to get a reference to the button, I would associate the button's click handler via script, not via the onclick attribute. Then the handler will get the event object, which has the button in its target property.

See below for the changes:

<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>

good job ! what if I want to disable the button afterwards the first add ?

Collectives™ on Stack Overflow

how to add an element on top of another element that have been dynamically created in javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related