javascript - 插入 HTML 元素的节点

Question

我并不专门研究 JavaScript，所以我需要一些关于脚本实现的帮助。请原谅菜鸟级别的问题。 我将向您展示这张图片，让您大致了解我想要的内容:

因此，短期而言，“+”号将添加另一个成分 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 形式。我尝试过 document.write() 但重写了整个页面。

那么我怎样才能让它插入 HTML 而不仅仅是文本呢？

Answer 1

如果您希望解释 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>';