Adding an HTML div with input and label using javacript

Question

I have an HTML form, the user can add a name, and if there is an additional name required to be added to click on the button and a new div with input and label inside it.

Here is the HTML:

                <div class="form-outline mb-4">
                  <input type="text" id="ownerName1" class="form-control" />
                  <label class="form-label" for="typeText"
                    >Name of Owner(s)/Major Shareholders:</label
                  >
                </div>
                <button
                  onclick="newShareholder()"
                  type="button"
                  class="mb-2 btn btn-primary btn-sm ripple-surface"
                >
                  Add Shareholders
                </button>

I am trying to write a script to create the div and inside it the input and label. I want to place the new div above the button.
here is what I have tried:

              <script>
                var buttons = 2;

                function newShareholder() {
                  var div = document.createElement("div");
                  div.className = "form-outline mb-4";

                  var input = document.createElement("input");
                  input.id = "ownerName" + buttons;
                  input.className = "form-control";
                  document.body.appendChild(input);
                  buttons++;
                  var label = document.createElement("label");
                  label.className = "form-label";
                  label.innerHTML = "Name of Owner(s)/Major Shareholders:";
                  div.innerHTML = input;
                  document.body.appendChild(div);
                }
              </script>

I am new to javascript so I search for a similar answer but I didn't grasp on how it works so if someone could provide explanation.

My current output is showing the additional input after the button and it is not inheriting the correct class.

here is a sample of the required output after clicking the add button:

                <!-- Original HTML -->
                <div class="form-outline mb-4">
                  <input type="text" id="ownerName1" class="form-control" />
                  <label class="form-label" for="typeText"
                    >Name of Owner(s)/Major Shareholders:</label
                  >
                </div>


                <!-- After clicking the add button 1st time -->
                <div class="form-outline mb-4">
                  <input type="text" id="ownerName2" class="form-control" />
                  <label class="form-label" for="typeText"
                    >Name of Owner(s)/Major Shareholders:</label
                  >
                </div>




                <!-- After clicking the add button 2nd time -->
                <div class="form-outline mb-4">
                  <input type="text" id="ownerName3" class="form-control" />
                  <label class="form-label" for="typeText"
                    >Name of Owner(s)/Major Shareholders:</label
                  >
                </div>

Spectric · Accepted Answer · 2021-07-07 00:07:17Z

2

Try this:

var buttons = 2;
const button = document.querySelector('button');
function newShareholder() {
  var div = document.createElement("div");
  div.className = "form-outline mb-4";

  var input = document.createElement("input");
  input.id = "ownerName" + buttons;
  input.className = "form-control";
  document.body.appendChild(input);
  buttons++;
  var label = document.createElement("label");
  label.className = "form-label";
  label.innerHTML = "Name of Owner(s)/Major Shareholders:";
  div.appendChild(input);
  div.appendChild(label);
  button.parentElement.insertBefore(div, button);
}

<div class="form-outline mb-4">
  <input type="text" id="ownerName1" class="form-control" />
  <label class="form-label" for="typeText">Name of Owner(s)/Major Shareholders:</label
                  >
                </div>
                <button
                  onclick="newShareholder()"
                  type="button"
                  class="mb-2 btn btn-primary btn-sm ripple-surface"
                >
                  Add Shareholders
                </button>

edited Jul 7, 2021 at 0:07

answered Jul 6, 2021 at 23:57

Spectric

32.6k6 gold badges32 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

see sharper Over a year ago

OP asked for the new divs to be placed above the button.

Collectives™ on Stack Overflow

Adding an HTML div with input and label using javacript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related