Question

我正在使用此代码：

<html>
 <head>
   <title>Dynamic Form</title>
   <script type="text/javascript">
     var i = 6;
    function CreateTextbox(){
      createTextbox.innerHTML = createTextbox.innerHTML 
                   +'<input type=text name="flow'+i+'"/>'
       i++;
    }
  </script>
</head>
<body>
 <form name="form" action="post">
  <input type="button" name="what" value="clickHere" onClick="CreateTextbox()"/>
   <div id="createTextbox"></div>
 </form>
</body>

当我添加新文本框时，将删除在上一个文本框中输入的值。我怎么能保留它？

Answer 1

通过连接innerHTML来添加HTML元素非常慢，这导致值被清除，因为容器（div createTextbox）和所有子项都是在每个innerHTML赋值上重新创建的。

我建议您使用document.createElement以编程方式创建输入元素，并使用appendChild将元素附加到容器div：

window.onload = function  () {

  var createTextbox = function () {
    var i = 6,
        container = document.getElementById('createTextbox');

    return function () {
      var div = document.createElement('div'),
          input = document.createElement('input');
      input.type= "text";
      input.name = "flow" + i;
      div.appendChild(input);
      container.appendChild(div);
      i++;
    }
  }();

  // event binding
  document.getElementById('addButton').onclick = createTextbox;
}

检查上述代码here。

Answer 2

当您重新定义其innerHTML属性时，您可能会强制浏览器重新创建该元素，这会导致您在此过程中丢失其值。

可以用

完成

  var elem = document.createElement("input");
  someDOMElement.childNodes.add(elem);

组合？

我如何保留动态添加的文本框的值

2 个答案: