Javascript:追加到元素会使之前的子元素丢失输入数据

Question

下面示例中的按钮 onClick 函数将文本区域逐个添加。但是，问题是当我添加例如 2 个文本区域并在其中输入一些文本，然后添加第三个文本区域时 - 我之前输入的文本消失了。它被刷新并显示为空白，未保存。

有解决办法吗？或者也许是其他一些更复杂的方法。

jsfiddle

index.html

<input type="submit" value="ADD" onClick="add();">
<div id="new"></div>

script.js

n=1;
function add() {
document.getElementById('new').innerHTML += '<div>' + n + '. Question: <br/><textarea name="question'+n+'" rows="4" cols="50"></textarea><br/></div>';
n++;
}

Answer 1

使用 DOM API 附加 <div>而不是设置innerHTML .

var n = 1;
function add() {
  var textarea = document.createElement("textarea");
  textarea.name = "question" + n;
  textarea.rows = 4;
  textarea.cols = 50;

  var div = document.createElement("div");    
  div.innerHTML = n + ". Question: <br />" + textarea.outerHTML + "<br />";

  document.getElementById("new").appendChild(div);
  n++;
}

它相当长，但字符串连接少得多 - 因此更容易阅读。如果事情变得更复杂，您可能需要考虑使用模板语言，例如 Mustache 或 Handlebars。

更新了jsfiddle:http://jsfiddle.net/5FJ4a/6/