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

Question

我想在每次单击下面代码中的 button 时将另一个 input 字段添加到 form 中。使用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>

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

How do I append input node to form with JavaScript while keeping existing form data?

javascript

append

dom-manipulation