Question

我想用JavaScript动态添加input，但我希望将按钮+保留在所有输入的底部。

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

（我不知道为什么我不能在这里添加字段，我总是有问题将MeteorJS事件转换为Snippet事件抱歉）

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

Answer 1

appendChild将始终在底部的容器中添加元素。请使用insertBefore。

document.getElementsByClassName("addEnv")[0].onclick = 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])
}

Here is working link

Answer 2

此代码没有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>

Answer 3

如果您更喜欢jQuery，那么您可以使用.insertBefore()。检查下面的代码段

$('.addEnv').click(function(){
    $("<input type='text' class='input-field env' />").insertBefore($('.addEnv'));
})

.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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 4

使用insertBefore（newItem，existingItem）

labelEnv.insertBefore(inputEnv,addEnvElement)

如何始终在另一个之前添加孩子？

4 个答案: