Javascript 在已启动js函数的div中添加一个元素（输入）

我想在启动JS函数的相邻div中插入一个

输入

JavaScript：添加元素（本例中为输入）
jQuery：检测javascript函数被激发的位置

我面临的问题是：

第二次单击后将创建输入
每次单击时，所有输入都从一个div移动到另一个div
我不明白为什么会这样！你们知道为什么一切都搞砸了吗？非常感谢


var ct=0；//培训部分的数字标识符
变量lec=0；//讲座的数字标识符
函数addtouch（）{
lec++；
var div=document.createElement（'div'）；
div.setAttribute（'id'，'teaching'.concat（lec））
var input=document.createElement（'input'）；
setAttribute（'type'，'text'）
div.appendChild（输入）
变量id；
jQuery（'.info_容器'）。单击（函数（id）{
var id=jQuery（this.attr（“id”）；
document.getElementById（id）.querySelector（'[id^=“touctions\u container”]'）.InsertAdjaceElement（'beforeend'，div）；
});
}
[id^=“row”]{
填充：10px；
利润率：10px；
背景颜色：灰色；
}
您的代码比需要的复杂得多

首先，在处理重复的HTML结构时，不要使用
id
属性。对它们使用相同的
类
，对它们进行分组。如果需要识别每个元素，请侦听事件并使用目标来确定与哪个元素进行了交互。在下面的示例中，这可以通过引发的事件的
target
属性来完成

其次，为了实现您的目标，只需在JS中使用一个不引人注目的事件处理程序（notHTML中的
onclick
属性）和
append（）
新HTML。试试这个：


jQuery（$=>{
$（'.info_container.btn'）。在（'click'，e=>{
e、 预防默认值（）；
$（e.target）。最近的（'.info_容器'）。查找（'.notices_容器'）。附加（''）；
});
});
.info\u容器{
填充：10px；
利润率：10px；
背景颜色：灰色；
}

您可以在浏览器中的
控制台中看到错误，甚至在JSFIDLE中也可以看到错误：
“未捕获引用错误：未定义讲座”
嘿@Jax-p谢谢您的提示！我不明白为什么讲座没有定义。讲座不是代码中的js变量。。。你有什么想法吗？你在这行中使用它：
teaching.setAttribute（'type'，'text'）
我假设它应该是
input.setAttribute（…
相反，该死，我做了更改，但在发布之前没有保存小提琴…我的糟糕！感谢您的双重检查！非常感谢您的编辑和回答！html结构在这种情况下非常重要。您认为可以执行
$（e.target）.最近（'[id^=“touctions_container”]'）。追加（''）
？为了确保输入以id/class开头的div结尾，以容器开头？我错过了这一部分。您可以使用
find（）
。我修改了答案以演示如何操作