Javascript 插入HTML元素的节点

我并不擅长javascript，所以我需要一点帮助来实现脚本。请原谅这样一个问题的愚蠢程度。 我将向您展示此图像，让您大致了解我想要什么：

因此，简而言之，“+”符号将添加另一个成分div，而减号将删除一个成分div。我尝试了DOM节点，但有一小部分我被卡住了。现在jquery就是这样

$('#add-ingredient').on('click', function() {
    ingredient_count += 1
    var para = document.createElement("div");
    var node = document.createTextNode('<div class="col col-3-12 left"></div><div id="ingredient-'+i+'" class="col col-9-12 right"><div class="col col-2-12 input"> <input type="text" class="r-title" name="recipe-ing-qty" placeholder="quantity" /> </div> <div class="col col-3-12 input"> <select class="r-title"> <option value="empty"></option> <?php for($in=0;$in<=$ing_count;$in++){echo "<option value=".$ing[$in]['ing_id'].">".$ing[$in]['ing_name']."</option>"; } ?> <option value="other">other</option> </select> </div> <div class="col col-4-12"> <input type="text" class="r-title" name="recipe-ing-name" placeholder="ingredient" /> </div> <div id="add-ingredient" class="col col-1-12 btn btn-add"><i class="fa fa-plus"></i></div> <div id="remove-ingredient" class="col col-1-12 btn btn-add"><i class="fa fa-minus"></i></div></div>');
    para.appendChild(node);
    var element = document.getElementById("row-2");
    element.appendChild(para);
});

我想附加HTML脚本，但不是以文本形式，而是以HTML形式。我试过写文档，但那会重写整页

---

那么，如何让它插入HTML而不仅仅是文本呢？

使用jquery，代码如下：

$('#add-ingredient').on('click', function() {
var clone=$(this).parent().clone();
$(this).parent().after(clone);
});

---

如果希望解释HTML，请将其分配给.innerHTML，不要创建文本节点

para.innerHTML = '<div class="col col-3-12 left"></div><div id="ingredient-'+i+'" class="col col-9-12 right"><div class="col col-2-12 input"> <input type="text" class="r-title" name="recipe-ing-qty" placeholder="quantity" /> </div> <div class="col col-3-12 input"> <select class="r-title"> <option value="empty"></option> <?php for($in=0;$in<=$ing_count;$in++){echo "<option value=".$ing[$in]['ing_id'].">".$ing[$in]['ing_name']."</option>"; } ?> <option value="other">other</option> </select> </div> <div class="col col-4-12"> <input type="text" class="r-title" name="recipe-ing-name" placeholder="ingredient" /> </div> <div id="add-ingredient" class="col col-1-12 btn btn-add"><i class="fa fa-plus"></i></div> <div id="remove-ingredient" class="col col-1-12 btn btn-add"><i class="fa fa-minus"></i></div></div>';

---

使用此脚本会使事情复杂化

$('#add-ingredient').on('click', function() {
ingredient_count += 1
$('#row-2').append('<div><div class="col col-3-12 left"></div><div id="ingredient-'+i+'" class="col col-9-12 right"><div class="col col-2-12 input"> <input type="text" class="r-title" name="recipe-ing-qty" placeholder="quantity" /> </div> <div class="col col-3-12 input"> <select class="r-title"> <option value="empty"></option> <?php for($in=0;$in<=$ing_count;$in++){echo "<option value=".$ing[$in]['ing_id'].">".$ing[$in]['ing_name']."</option>"; } ?> <option value="other">other</option> </select> </div> <div class="col col-4-12"> <input type="text" class="r-title" name="recipe-ing-name" placeholder="ingredient" /> </div> <div id="add-ingredient" class="col col-1-12 btn btn-add"><i class="fa fa-plus"></i></div> <div id="remove-ingredient" class="col col-1-12 btn btn-add"><i class="fa fa-minus"></i></div></div></div>'); });

---

你可以这样做：

para.appendChild$.parseHTML“其他”； var元素=document.getElementByIdrow-2；

---

第6.1段；这个很有效，我就用这个。o、 啊，我明白了。我还以为它还有其他一些功能我找不到。这也很有效，只是我不需要克隆它，因为它们有不同的ID。我已经解决了，谢谢。不要在标题中加上[已解决]。接受答案是指你如何表明问题已经解决。