javascript - 如何始终在另一个 child 之前添加 child ？

Question

我要添加 input动态地使用 JavaScript 但我想保留按钮 +在所有输入的底部。

document.getElementsByClassName("addEnv").onclick = function(e){
  var inputEnv = document.createElement("input");
  var labelEnv = document.getElementById("labelEnv");
  inputEnv.setAttribute("type", "text");
  inputEnv.setAttribute("class", "input-field env");
  labelEnv.appendChild(inputEnv)
}

.form-style-2{
  max-width: 600px;
  padding: 10px 10px 2px 10px;
  font: 13px Arial, Helvetica, sans-serif;
  background: rgba($swisscom-blue, 0.7);
}
.form-style-2-heading{
  color:black;
  font-weight: bold;
  font-style: italic;
  border-bottom: 2px solid #ddd;
  margin-bottom: 20px;
  font-size: 15px;
  padding-bottom: 3px;
}
.form-style-2 label{
  display:table;
  width: 100%;
  font-size: 15px;
}

.form-style-2 label > span{
  color: black;
  font-weight: bold;
  padding-right: 5px;
  width:25%;
  display: table-cell;
}
.form-style-2 span.required{
  color:red;
}

.form-style-2 a{
  display: block;
}
.form-style-2 input.input-field {
  border: 1px solid #c2c2c2;
  border-radius: 3px;
  box-sizing: border-box;
  display: table-cell;
  margin: 4px;
  outline: medium none;
  padding: 7px;
  width: 31%;
}
.form-style-2 input.env, input.vol{
  width: 100% !important;
}
.form-style-2 input.nameModif{
  width: 50% !important;
}


.form-style-2 .input-field:focus{
  border: 1px solid #0C0;
}
.form-style-2 input.saveModif{
  border: none;
  padding: 5px 5px 5px 5px;
  background: #FF8500;
  color: #fff;
  box-shadow: 1px 1px 4px #DADADA;
  border-radius: 3px;
}
.form-style-2 input.saveModif:hover{
  background: #EA7B00;
  color: #fff;
}

<div class="form-style-2">
    <div class="form-style-2-heading">help me</div>
    <form action="" method="post">
      <label>
        <span>Container name
          <span class="required">*</span>
        </span>
        <input type="text" class="input-field nameModif" value="n1" />
      </label>
    <label id="labelEnv">
      <span>Environment
      </span>
      <input type="text" class="input-field env" value="e1" />
      <input type="text" class="input-field env" value="e2" />
      <input type="text" class="input-field env" value="e3" />
      <input type="text" class="input-field env" value="e4" />
      <input type="text" class="input-field env" value="e5" />
      <input type="text" class="input-field env" value="e6" />
      <button class="addEnv" type="button">+</button>
    </label>
    </form>
    </div>

(我不知道为什么我不能在这里添加一个字段，我总是无法将 MeteorJS 事件转换为 Snippet 事件抱歉)

所以问题是，当我添加一个字段时，它位于按钮下方，但我想将按钮保留在 <label> 的底部。

Answer 1

这段代码没有jquery。请检查我是否为您的代码做了更改。你有两个错误，第一个是 getElementsByClassName 给你数组，所以你需要索引来将事件添加到按钮。其次，您可以使用 insertBefore 在按钮之前插入。

document.getElementsByClassName("addEnv")[0].addEventListener("click",function(e){
  var inputEnv = document.createElement("input");
  var labelEnv = document.getElementById("labelEnv");
  inputEnv.setAttribute("type", "text");
  inputEnv.setAttribute("class", "input-field env");
  labelEnv.insertBefore(inputEnv,document.getElementsByClassName("addEnv")[0] )
} );

.form-style-2{
  max-width: 600px;
  padding: 10px 10px 2px 10px;
  font: 13px Arial, Helvetica, sans-serif;
  background: rgba($swisscom-blue, 0.7);
}
.form-style-2-heading{
  color:black;
  font-weight: bold;
  font-style: italic;
  border-bottom: 2px solid #ddd;
  margin-bottom: 20px;
  font-size: 15px;
  padding-bottom: 3px;
}
.form-style-2 label{
  display:table;
  width: 100%;
  font-size: 15px;
}

.form-style-2 label > span{
  color: black;
  font-weight: bold;
  padding-right: 5px;
  width:25%;
  display: table-cell;
}
.form-style-2 span.required{
  color:red;
}

.form-style-2 a{
  display: block;
}
.form-style-2 input.input-field {
  border: 1px solid #c2c2c2;
  border-radius: 3px;
  box-sizing: border-box;
  display: table-cell;
  margin: 4px;
  outline: medium none;
  padding: 7px;
  width: 31%;
}
.form-style-2 input.env, input.vol{
  width: 100% !important;
}
.form-style-2 input.nameModif{
  width: 50% !important;
}


.form-style-2 .input-field:focus{
  border: 1px solid #0C0;
}
.form-style-2 input.saveModif{
  border: none;
  padding: 5px 5px 5px 5px;
  background: #FF8500;
  color: #fff;
  box-shadow: 1px 1px 4px #DADADA;
  border-radius: 3px;
}
.form-style-2 input.saveModif:hover{
  background: #EA7B00;
  color: #fff;
}

<div class="form-style-2">
    <div class="form-style-2-heading">help me</div>
    <form action="" method="post">
      <label>
        <span>Container name
          <span class="required">*</span>
        </span>
        <input type="text" class="input-field nameModif" value="n1" />
      </label>
    <label id="labelEnv">
      <span>Environment
      </span>
      <input type="text" class="input-field env" value="e1" />
      <input type="text" class="input-field env" value="e2" />
      <input type="text" class="input-field env" value="e3" />
      <input type="text" class="input-field env" value="e4" />
      <input type="text" class="input-field env" value="e5" />
      <input type="text" class="input-field env" value="e6" />
      <button class="addEnv" type="button">+</button>
    </label>
    </form>
    </div>