我如何添加输入节点与JavaScript表单，同时保持现有的表单数据?

Question

我想在每次点击下面代码中的button时向form添加另一个input字段。使用appendChild()，似乎我只能这样做一次。我尝试使用innerHTML添加字段，但这会删除已经在现有表单字段中键入的内容。在保留表单中已经输入的内容的情况下，使用普通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是一种反模式——在我看来，最好完全关闭它。
• 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>