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

【问题标题】：how do i retain the value of dynamically added textboxes我如何保留动态添加的文本框的值
【发布时间】：2009-09-08 03:48:46
【问题描述】：

我正在使用此代码：

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

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

【问题讨论】：

完全欺骗：stackoverflow.com/questions/1391875/…
这个帖子是重复的还是粘贴的链接是重复的？
这是骗子：stackoverflow.com/questions/1390553/…
老兄，你还在阅读你之前问题的答案吗？我们已经多次告诉过您不要为此使用 innerHTML。

标签： php javascript textbox

【解决方案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。

【讨论】：

【解决方案2】：

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

这可以用一个

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

组合？

【讨论】：