Question

创建动态新字段似乎清除了现有字段

也没有尝试让多个元素具有相同的id，因此我不相信appendChild会起作用。也许你可以在创建不同的ID时找到一种方法吗？

欢迎任何帮助=）

var template;
var a = 1;
window.onload = function() {
  template = document.querySelector("#wrapper").innerHTML;
  document.querySelector("#more_fields").addEventListener("click", function(e) {
    e.preventDefault(); // tell the browser to not send the form
    document.getElementById('wrapper').innerHTML += template; // add next segment
    document.querySelector("#wrapper > label:last-of-type").innerHTML = "Segment " + (++a) + ":";
  });
}

.form-group {
  display: inline
}

#wrapper > label {
  margin: 0 0 10px 210px;
}

.segment {
  display: inline-block;
  margin: 0 0 1em
}

.form-group > label {
  margin: 0 0 10px 20px;
}

.form-group > input {
  width: 15%
}

<div class="container">
  <h2>Form</h2>
  <form>
    <div id="room_fields">
      <div class="content" id="wrapper">
        <label style:>Segment 1:</label>
        <div class="segment">
          <div class="form-group">
            <label>IN:</label>
            <input name="seg-in[]" type="text">
          </div>
          <div class="form-group">
            <label>OUT:</label>
            <input name="seg-out[]" type="text">
          </div>
          <div class="form-group">
            <label>Duration:</label>
            <input name="seg-dur[]" type="text">
          </div>
        </div>
      </div>
    </div>
    <br><br>

    <div style="text-align: right;">
      <button id="more_fields">+</button>
    </div>
    <br>
    <br>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>

Answer 1

innerHTML不会包含输入的当前值IIRC，但执行+=操作会删除现有值仍然很奇怪。

但是，insertAdjacentHTML()应该按预期工作。

＆＃13;

  var template;
    var a = 1;
    window.onload = function() {
      template = document.querySelector("#wrapper").innerHTML;
      document.querySelector("#more_fields").addEventListener("click", function(e) {
        e.preventDefault(); // tell the browser to not send the form
        document.getElementById('wrapper').insertAdjacentHTML('beforeend', template); // add next segment
        document.querySelector("#wrapper > label:last-of-type").innerHTML = "Segment " + (++a) + ":";
      });
    }

＆＃13;

.form-group {
  display: inline
}

#wrapper > label {
  margin: 0 0 10px 210px;
}

.segment {
  display: inline-block;
  margin: 0 0 1em
}

.form-group > label {
  margin: 0 0 10px 20px;
}

.form-group > input {
  width: 15%
}

＆＃13;

  <div class="container">
    <h2>Form</h2>
    <form>
      <div id="room_fields">
        <div class="content" id="wrapper">
          <label style:>Segment 1:</label>
          <div class="segment">
            <div class="form-group">
              <label>IN:</label>
              <input name="seg-in[]" type="text">
            </div>
            <div class="form-group">
              <label>OUT:</label>
              <input name="seg-out[]" type="text">
            </div>
            <div class="form-group">
              <label>Duration:</label>
              <input name="seg-dur[]" type="text">
            </div>
          </div>
        </div>
      </div>
      <br><br>

      <div style="text-align: right;">
        <button id="more_fields">+</button>
      </div>
      <br>
      <br>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>

＆＃13;

Answer 2

基本上，我的下面的代码不是100％正确，你应该自己改变它。

在HTML中，您可以定义一个隐藏的div，它是您的包装器。在其嵌套元素ID中，您可以设置类似＆＃39; $$$＆＃39;。

的模式

   <div class="content" id="wrapper$$$" sytle="visibility: hidden;">
      <label style:>Segment 1:</label>
      <div class="segment">
        <div class="form-group">
          <label>IN:</label>
          <input name="seg-in[]" type="text">
        </div>
        <div class="form-group">
          <label>OUT:</label>
          <input name="seg-out[]" type="text">
        </div>
        <div class="form-group">
          <label>Duration:</label>
          <input name="seg-dur[]" type="text">
        </div>
      </div>
    </div>

在您的javascript中，声明一个名为index的全局变量，并用＆＃39; $$$＆＃39;替换索引值。当您动态添加模板时，它将增加1。

  template = document.querySelector("#wrapper").innerHTML;
  template = template.replace('$$$', index);
  index ++;
 ...

Answer 3

<强>问题：

此处的问题是使用innerHTML，因为innerHTML将始终覆盖元素的HTML，因此以前键入的值将被清除，这就是您应该使用{{1}的原因}。

你的动态逻辑是正确的，你只需要按照添加新字段的方式进行操作。

<强>解决方案：

我尝试重写您的代码，以便使用.appendChild() appendChild()作为模板以智能方式使用#wrapper，并在新的附加字段中动态更新innerHTML。

id

此代码每次都会创建一个新的var template = document.querySelector("#wrapper").innerHTML; function addFields() { var wrapper = document.createElement("div"); wrapper.innerHTML = template; wrapper.querySelector("label:last-of-type").innerHTML = "Segment " + (++a) + ":"; document.getElementById('wrapper').appendChild(wrapper); }，我们将div HTML放入其中，使用{{1}更新template动态引用当前包装div中的标签然后，最后将这个新div添加到我们的元素中。

<强>演示：

这是一个有效的演示片段：

＆＃13;

label

＆＃13;

wrapper.querySelector("label:last-of-type")

＆＃13;

单击按钮以动态添加字段将清除现有字段

3 个答案: