javascript - 如何创建动态添加 html 元素的 javascript 函数？

Question

我正在尝试创建一个添加新 html 元素的 javascript 函数，每个元素都有新的 ID。例如这个表格；为了让用户提交他能说的语言和他在每种语言上的水平。但如果他会说很多语言，他可以添加新的输入来输入其他语言。

<form id="form">
Language spoken1: <input id="language1">
Level: <input id="level1">
<form>
<input type="button" value="add new language" id="add" onclick="myFunction">

得到这样的结果

<form id="form">
Language spoken1: <input id="language1">
Level: <input id="level1">
Language spoken2: <input id="language2">
Level: <input id="level2">
<form>
<input type="button" value="add new language" id="add" onclick="myFunction">

当他提交这样的结果时，页面上将显示

口语1：英语，水平：母语口语2：西班牙语，水平：良好

标签： javascripthtml

Answer 1

每次单击按钮时，它将创建两个输入元素，计算现有输入并找到新输入 ID 的数量。在添加...和删除按钮后，我还添加了自动对焦输入）

(function(){
  
let form = document.getElementById('form');

document.getElementById('add').addEventListener('click', function(){
  let lang  = document.createElement('input');
  let level = document.createElement('input');
  let number = document.querySelectorAll('#form input').length / 2 + 1;

  lang.id = 'language' + number;
  level.id = 'level' + number;

  lang.placeholder = 'Language spoken' + number;
  level.placeholder = 'Level';

  form.innerHTML += '<br>';
  form.appendChild(lang);
  form.appendChild(level);

  lang.focus();
});
  
document.getElementById('delete').addEventListener('click', function(){
  let inp = document.querySelectorAll('#form input');
  if(inp.length == 2){ return; }
  /* removing last two elements */
  inp[inp.length-1].remove();
  inp[inp.length-2].remove();

  let br = document.querySelectorAll('#form br');
  br[br.length-1].remove();
});
  
})();

#delete {
  color: white;
  background-color: #c00;
  border: 2px solid #c00;
  outline: none;
  cursor: pointer;
}
#form {white-space: inherit;}
input {margin: 2px 5px;}

<form id="form">
  <input id="language1" placeholder="Language spoken1"><input id="level1" placeholder="Level">
</form>

<br>

<input type="button" value="add a new language" id="add"> 
<input type="button" value="X" id="delete">

任何问题？）