Question

我使用javascript构建一个小片段，通过单击按钮添加更多字段。它工作正常并按原样添加字段，但在单击“添加更多”按钮时会丢弃现有字段的值。

您可以运行下面的代码段来检查问题...请添加2-3个字段并在这些字段中键入内容然后添加另一个字段。你会看到发生了什么。

var fldsContainer = document.getElementById('fields');
var fld = '<p><input name="test[]" type="text"></p>';

function addField() {
  fldsContainer.innerHTML += fld;
}

<div id="fields"></div>

<button onclick="addField()">Add More Field</button>

我知道在jQuery中我们可以简单地.append()但我需要一个javascript的解决方案。 javascript中是否有追加方法？

或者任何其他方法来解决我的问题将不胜感激：）

Answer 1

这是因为每次使用全新的字段列表都会重新呈现fldsContainer的内容。您需要附加到容器。尝试使用insertAdjacentHTML()方法。

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

var fldsContainer = document.getElementById('fields');
var fld = '<p><input name="test[]" type="text"></p>';

function addField() {
  fldsContainer.insertAdjacentHTML('beforeend', fld);
}

<div id="fields"></div>

<button onclick="addField()">Add More Field</button>

Answer 2

它可能看起来更大并且可能有点矫枉过正，但我更喜欢将所有输入都跟踪到一个数组中，这样我就可以将自己与可能在将来查询DOM元素分开。

＆＃13;

var fldsContainer = document.getElementById('fields');
    var fields = [];

    function render() {
      fldsContainer.innerHTML = getFields();
    }

    function addField() {
      fields.push(fields.length ? getField(fields.length) : getField(0));

      render();
    }

    function setValue(input, i) {
      fields[i].value = input.value;
    }

    function getFields() {
      var str = ''
      fields.forEach(function(field) {
        str += (`<p><input name="${field.name}" value="${field.value}" type="text" onchange="setValue(this, ${field.index})"></p>`);
      });

      return str;
    }

    function getField(index) {
      return {
        index,
        name: `test${index}`,
        value: ''
      }
    }

＆＃13;

<div id="fields"></div>

<button onclick="addField()">Add More Field</button>

＆＃13;

使用javascript保留文本字段的值

2 个答案: