插入HTML元素的节点

Question

我并不完全专注于javascript，因此我需要在脚本的实现方面提供一些帮助。请原谅这样一个问题的noob级别。 我会告诉你这张图片，让你大致了解我想要的东西：

所以简而言之，'+'符号会添加另一个成分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>';

Answer 2

您只是简单地使用此脚本

$('#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>'); });

Answer 3

使用jquery，使用类似的代码：

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

Answer 4

你可以这样做：

＆＃13;

＆＃13;

para.appendChild($.parseHTML('<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>'));
var element = document.getElementById("row-2");
element.appendChild(para);

＆＃13;

＆＃13;

＆＃13;