关于#前端#的问题：点击添加按钮，为什么会把原来input框输入的清空，怎样在保存的情况下进行添加

Question

<div id="container">
<input type="text" placeholder="名字" />
<input type="number" min="18" max="80" />
</div>
<input type="button" onclick="add()" value="添加"/>
<script>
window.add = function() {
var myDiv = document.getElementById("container").;
console.log(myDiv);
var text = <input type="text" placeholder="名字"/>             <input type="number" min="18" max="80"/>
myDiv.innerHTML += text;
}
</script>

点击添加按钮，为什么会把原来input框输入的清空，怎样在保存的情况下进行添加

Answer 1

<div id="container">
  <input type="text" placeholder="名字" id="nameInput" />
  <input type="number" min="18" max="80" id="ageInput" />
</div>
<input type="button" onclick="add()" value="添加"/>
<script>
function add() {
  var myDiv = document.getElementById("container");
  var nameInput = document.getElementById("nameInput");
  var ageInput = document.getElementById("ageInput");
  
  // 创建新的输入框元素
  var newInput = document.createElement("input");
  newInput.type = "text";
  newInput.placeholder = "名字";
  newInput.value = nameInput.value;
  
  // 创建新的数字输入框元素
  var newNumberInput = document.createElement("input");
  newNumberInput.type = "number";
  newNumberInput.min = "18";
  newNumberInput.max = "80";
  newNumberInput.value = ageInput.value;
  
  // 在容器中添加新的输入框元素
  myDiv.appendChild(newInput);
  myDiv.appendChild(newNumberInput);
  
  // 添加完成后，清空表单
  nameInput.value = "";
  ageInput.value = "";
}
</script>