Javascript 如何在js中制作自动输入行追加器？

我有一个带有输入行和提交按钮的HTML页面。 如果我们更改第一行内容，我想在该行下自动生成一个新行

在搜索之前，我只做了第二个按钮，名为“添加新行”（显式）

HTML部分
打印“”；
打印“”；
JS部分
$（“#addLineButton”）。单击（函数（e）{
e、 预防默认值（）；
var newLine=“”；
document.getElementById（“nbLines”）.textContent=Number（document.getElementById（“nbLines”）.textContent）+1；
var nbLines=Number（document.getElementById（“nbLines”）.textContent）；
换行符+=“
”
$（“#zoneOF”）.append（换行符）；
});

$（“#zoneOF”）是一个div，而nbLines是一个标签，用于计算我们已经有多少行

然后我在搜索（但不是创建，因为我不知道如何清楚地表达它）如何删除addLineButton并自动添加行（当然是使用on change事件）

如果您不理解sthg，我不会感到惊讶，那么请您毫不犹豫地让我重新表述。

---

提前谢谢你。

好的，我通过简单地使代码递归来解决这个问题

$（文档）.ready（函数（）{
var newLine=“”；
document.getElementById（“nbLines”）.textContent=Number（document.getElementById（“nbLines”）.textContent）+1；
var nbLines=Number（document.getElementById（“nbLines”）.textContent）；
换行符+=“
”
$（“#zoneOF”）.append（换行符）；
$（“#行”+nbLines）.on（'change'，function（）{
setNewLine（）；
});
函数setNewLine（）{
var newLine=“”；
document.getElementById（“nbLines”）.textContent=Number（document.getElementById（“nbLines”）.textContent）+1；
var nbLines=Number（document.getElementById（“nbLines”）.textContent）；
换行符+=“
”
$（“#zoneOF”）.append（换行符）；
$（“#行”+nbLines）.on（'change'，function（）{
setNewLine（）；
});
}

“当然有更改事件”-您尝试过事件吗？没有，只是知道此事件将是可以帮助我的事件。此外，我认为，对于更改事件，如果我在输入中键入3个字符，它将创建3个新行。然后我有点不知所措：

更改事件不会在每次按键时触发：（）哦，没想到会是这样。我做了一个递归函数，它正在工作。将把它作为解析答案发布。谢谢！您可能想看看事件委派：/
HTML part
print '<input type="button" id="addLineButton" value="Ajouter ligne"/>';
print '<input type="submit" id="valider" value="Rechercher"/>';



JS part
    $("#addLineButton").click(function(e){
        e.preventDefault();            
        var newLine = "";
        document.getElementById("nbLines").textContent = Number(document.getElementById("nbLines").textContent) + 1;
        var nbLines = Number(document.getElementById("nbLines").textContent);

        newLine += "<input type='text' id='line"+nbLines+"' placeholder='Ref article'/><input type='number' id='qty"+nbLines+"' placeholder='Qté étiquettes'/><br>"

        $("#zoneOF").append(newLine);

    });