Question

以下示例中的按钮onClick功能将textareas添加到另一个下方。但是，问题是当我添加例如2 textareas并在其中键入一些文本，然后添加第三个textarea - 我之前键入的文本消失了。它被刷新并且空白，它没有被保存。

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

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

Answer 2

innerHTML不会捕获用户输入。您需要改为使用新元素，并保留旧标记。

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

JS小提琴： http://jsfiddle.net/5FJ4a/7/

Answer 3

这是一个更新的小提琴。 FIDDLE

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

编辑：我确实添加了jQuery，因为它更容易维护。

Answer 4

这是一个JS答案，它摆脱了全局的add（）函数和＆＃39; n＆＃39;变量

http://jsfiddle.net/csrow/qV6jd/4/

<input type="submit" value="ADD" id='addButton'>
<div id="new"></div>

document.getElementById('addButton')
   .onclick = function () {
   pDiv = document.getElementById('new');
   var n = pDiv.childNodes.length + 1;
   var newDiv = document.createElement("div");
   newDiv.innerHTML = n + '. Question: <br/><textarea name="question' + n + '" rows="4" cols="50"></textarea><br/>';
   pDiv.appendChild(newDiv);
};

Answer 5

这里有工作解决方案。但是，我觉得他们并没有真正解释这个问题。

当你有像

这样的代码时

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

您可能会想到您要附加HTML，但事实并非如此。您完全覆盖了#new中的html。它与设置

相同

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

我们希望innerHTML包含textareas中的当前值，但不会it contains the value of the node when it was created initially。

你必须使用DOM操作来附加textareas而不影响现有的as others have suggested.

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

5 个答案: