如何在保留现有表单数据的同时使用 JavaScript 将输入节点附加到表单？

Question

每次单击下面代码中的button 时，我想在form 中添加另一个input 字段。使用appendChild()，似乎我只能这样做一次。我尝试使用innerHTML 添加该字段，但这会删除已在现有表单字段中输入的内容。在保留已经输入表单的内容的同时，使用 vanilla JavaScript 实现这一目标的最佳方法是什么？提前感谢您的帮助。

let getArticleForm = document.getElementById("articleForm");
let cloneInputNode = document.getElementById("textInput").cloneNode(true);
cloneInputNode.setAttribute("id", "newId");

function addInput() {
  getArticleForm.appendChild(cloneInputNode);
}

<form id ='articleForm'>
  <input id="textInput" type="textarea"></input>
</form>
<button onClick="addInput()">add input</button>

Codepen

Answer 1

在监听器内部克隆它，否则你只创建了一个克隆（当再次附加时，它会从之前的位置删除）。

let getArticleForm = document.getElementById("articleForm");

function addInput() {
  getArticleForm.appendChild(document.getElementById("textInput").cloneNode(true));
}

<form id ='articleForm'>
  <input id="textInput" type="textarea"></input>
</form>
<button onClick="addInput()">add input</button>

但也有一些其他的修复：

• 克隆的节点都将具有相同的 ID，这是无效的 HTML。虽然您可以为每个输入设置一个新 ID，但动态 ID 无论如何都是一种反模式 - 最好完全不使用 IMO。
• type="textarea" 作为<input> 的属性没有意义。如果您需要文本区域，请使用 <textarea>。
• 与其克隆现有输入，不如考虑仅附加一个新输入。

const getArticleForm = document.getElementById("articleForm");

function addInput() {
  getArticleForm.appendChild(document.createElement('input'));
}

<form id ='articleForm'>
  <input id="textInput" type="textarea"></input>
</form>
<button onClick="addInput()">add input</button>