Javascript 按钮动态添加子div，并重新创建该按钮

我正在制作一个表单，用户可以在其中添加新的“项目”和新的“类别”。在每个项目输入框之后，都有一个按钮用于添加另一个输入框。对于每个类别，都有一个输入列表和类别名称的输入；类似地，在类别的末尾有一个按钮，用于添加另一个类别

我已经让按钮工作了，但是添加到表单中的新按钮没有添加新的输入元素，只有第一个按钮可以。到目前为止，我一直在为javascript使用以下代码：

var counter = 1;
function addInput(divName){
var newdiv = document.createElement('div');
          newdiv.innerHTML = "<br><div class='form-inline' id='dynamicInput'><label  for='item'>Item #" + (counter + 1) + "</label><input type='item' class='form-control' id='item1' placeholder='Artichoke Hearts'><button type='button' class='btn btn-default btn-lg' onclick='addInput('dynamicInput')'><span class='glyphicon glyphicon-plus'></span> Add</button></div>";
 document.getElementById(divName).appendChild(newdiv);
 counter++;

}

var计数器=1；
函数addInput（divName）{
var newdiv=document.createElement（'div'）；
newdiv.innerHTML=“
项#”+（计数器+1）+“添加”；
document.getElementById（divName）.appendChild（newdiv）；
计数器++；
}

类别也使用相同的javascript，只是不同的函数名和html。 以下是其中的一部分： （奇怪的是，代码在JSFIDLE上不起作用，但通过本地机器在我的浏览器上起作用…）

我试图取而代之的是elementByClassName，但也没有成功

---

我希望这是有道理的。如果不清楚，请评论，我会尝试用不同的方式解释。我已经为此挣扎了一段时间了。提前感谢您的帮助

JSFIDLE的整个问题是，您必须在左上角的站点设置

无包装

，这样方法才能工作。如果您不这样做，方法的名称将在控制台中显示为未定义。我没有更改代码中的任何内容。只是更改了

无包装

部分，效果非常好

编辑：

这是新提琴：

---

基本上，我只是在html中用上面的一部分替换了innerHTML部分，它工作了…

在JSBin上查看这个示例：

我知道人们喜欢抨击jQuery，但这是一个很好的使用它的场景。动态添加要响应事件的内容（如单击）时，通常最好使用。这样，当您添加更多元素时，它们将自动设置为执行JS以响应您的单击事件

在下面的示例中，我在

.addItem

按钮上侦听单击事件。单击这些按钮后，我将运行

addItem

addItem

将遍历DOM到表单父元素，然后将一个新项附加到该元素的父元素上（本例中为

body

）

//使用事件委派来侦听对所有“.addItem”元素的单击，
//即使是后来动态添加的
$（文档）.on（'click'，'addItem'，'addItem'）；
var计数器=1；
函数addItem（）{
计数器++；
//jQuery将把`this`作为触发单击事件的元素（`.addItem`按钮）的引用
//查找作为“.addItem”父项的“.form inline”元素`
//选择窗体的父元素
var$parent=$（this）.closest（'.form inline'）.parent（）；
var html='Item#'+计数器+'Add'；
//将新HTML附加到表单的父元素
$parent.append（html）；
}

太棒了！谢谢但现在我问的问题仍然存在。如果在添加一个按钮后单击第二个按钮，则该按钮无法添加另一个按钮。只有单击第一个按钮，它才能工作jQuery才是正确的选择。非常感谢您的详细回复，这对我帮助很大。我将继续编写一些jQuery教程，以便更经常地使用它。

// Use event delegation to listen for clicks on all `.addItem` elements,
// even ones added dynamically later
$(document).on('click', '.addItem', addItem);

var counter = 1;

function addItem() {
  counter++;

  // jQuery will make `this` a reference to the element that triggered the click event (`.addItem` button)
  // Find the `.form-inline` element that is the parent of `.addItem`
  // Select the form's parent element
  var $parent = $(this).closest('.form-inline').parent();

  var html = '<div class="form-inline"><label for="item">Item #' + counter + '</label> <input type="item" placeholder="Artichoke Hearts"> <button type="button" class="addItem">Add</button></div>';

  // Append the new HTML to the form's parent element
  $parent.append(html);
}