javascript - 添加新值时输入框值消失

Question

我正在开发一个网络应用程序，我需要在其中一个接一个地添加多个输入框，以便从用户那里获取命令。我使用 JavaScript 将它们添加到一个 div 中，每个元素都有一个唯一的 ID。我遇到的问题是，一旦我按下 enter 并调用 JavaScript 函数添加下一个，之前的输入框就会清空，我不知道为什么。

示例代码如下:

var i = 0;
add_input();

function add_input() {
  i++;
  document.getElementById('main').innerHTML += "<p>&gt; <input type='text' style='width:90%' id='input" + i + "' onkeypress='press_key(event, this)'></p>";
  document.getElementById('input' + i).focus();
}

function press_key(e, t) {
  if (e.keyCode == 13) {
    add_input();
  }
}

<div id='main'></div>

Answer 1

innerHTML 将覆盖所有现有内容并用新内容替换它们。您应该创建一个新的输入元素并使用 insertNode相反。