javascript - 使用 javascript 添加带有输入和标签的 HTML div

Question

我有一个 HTML 表单，用户可以添加一个名称，如果需要添加一个额外的名称来点击按钮和一个带有输入和标签的新 div。
这是 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>

我正在尝试编写一个脚本来创建 div 并在其中输入输入和标签。
我想将新的 div 放在按钮上方。
这是我尝试过的:

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

我是 javascript 的新手，所以我搜索了类似的答案，但我不了解它是如何工作的，所以如果有人可以提供解释。
我当前的输出显示按钮后的附加输入，它没有继承正确的类。
这是单击添加按钮后所需输出的示例:

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

Answer 1

尝试这个:

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>