Question

我正在尝试通过单击图像来创建新的字段，例如此表单中的第一个字段，但是这些字段正在生成以提交的按钮下方，我不明白为什么。我要寻找的行为是使新字段出现在按钮上方。

这是我的代码

        <div id="title">
            <h1>Monthly Run Operations Assessment</h1>
        </div>


        <div class="row">
          <div class="col-20" id="row-one">
            <label for="name">1. </label>
          </div>

          <div class="col-60">
            <input type="text" id="op" name="op" placeholder="Insert operation here">
          </div>

          <div class="col-20" id="symbol">
              <img src="file:///C:/Users/user/Downloads/plus-circle-solid.svg" id="add">
          </div>
        </div>

        <div id="submit">
          <input type="submit" value="Submit">
        </div>

    </div>

这是功能：

var element = document.getElementById("add");
element.onclick = function() {
    console.log("woot");
    var ele = document.getElementsByClassName("row")[0];
    var clone = ele.cloneNode(true);
    var newDiv = document.createElement("div");
    document.body.appendChild(clone);
}

Answer 1

顾名思义，

appendChild总是附加新元素-即，将其添加到末尾。您想要的是insertBefore：

document.body.insertBefore(clone, ele);

Answer 2

处理此问题的一种方法是将表单包装在container中并附加到表单上：

var element = document.getElementById("add");
element.onclick = function() {
  // console.log("woot");
  var ele = document.getElementsByClassName("row")[0];
  var clone = ele.cloneNode(true);
  var newDiv = document.createElement("div");
  document.querySelector('#container').appendChild(clone);
}

<div id="title">
  <h1>Monthly Run Operations Assessment</h1>
</div>

<div id="container">
  <div class="row">
    <div class="col-20" id="row-one">
      <label for="name">1. </label>
    </div>

    <div class="col-60">
      <input type="text" id="op" name="op" placeholder="Insert operation here">
    </div>

    <div class="col-20" id="symbol">
      <img src="file:///C:/Users/user/Downloads/plus-circle-solid.svg" id="add">
    </div>
  </div>
</div>
<div id="submit">
  <input type="submit" value="Submit">
</div>

</div>

Answer 3

我结合以上答案来达到预期的效果。

var element = document.getElementById("add");
element.onclick = function() {
  // console.log("woot");
  var ele = document.getElementsByClassName("row")[0];
  var clone = ele.cloneNode(true);
  var newDiv = document.createElement("div");
  document.querySelector('#container').insertBefore(clone, ele);
}

如何在容器中最后一个div之前产生一个新的div？

3 个答案: