Question

我在下面有一个脚本，它为我的表单添加了一个元素，另一个文本输入字段。它添加了新的文本输入字段，但如果我在第一个字段中键入内容，则添加一个新字段，它将从第一个字段中删除输入文本。

我无法看到我在这里出错的地方，我对JavaScript很新，所以请放轻松：）

function addAnother() {
  var id = 1;
  var elemebt = document.getElementById('quest');
  var number = elemebt.getElementsByTagName('*').length;
  var add = number + 1;
  var element = '<input type="text" name="question[]" id="quest'+ add +
    '" placeholder="Example: What previous experiance do you have?" class="form-control" id="cloan"><a id="name'+
    add +'" onClick="removeEle('+ add +')">Remove</a>';
  document.getElementById('quest').innerHTML += element;    
}

Answer 1

在JavaScript中，以下两个语句实际上是相同的：

str = str + ' more text ';
str += ' more text ';

这里的关键点是，str的值最后是 完全重写 。

在您的情况下，这意味着“quest”元素的innerHTML被覆盖，浏览器完全重新创建它的子节点，从而重置任何状态和输入值。

要解决此问题，您可以使用appendChild方法，但首先需要创建要追加的元素。给出HTML字符串的最简单方法是使用innerHTML属性将该字符串注入虚拟元素：

var target = document.getElementById('target');

var tDiv = document.createElement('div');
var htmlString = '<input type="text"></input>';
tDiv.innerHTML = htmlString;

target.appendChild(tDiv.children[0]);

<div id="target">Keep my content safe!</div>

添加元素有效，但清除输入值

1 个答案: