如何在保留现有表单数据的同时使用 append 输入节点与 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>

密码笔

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，请使用<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>