Вставка узлов HTML-элементов

Question

Я точно не специализируюсь на javascript, поэтому мне нужна помощь в реализации скрипта. Извините уровень нуба такого вопроса. Я покажу вам это изображение, чтобы дать вам общее представление о том, что я хочу:

Таким образом, в короткие сроки, знак «+» будет добавить еще один DIV ингредиент и минус будет удалить один. Я попробовал DOM Nodes, за исключением крошечной части, за которой я застрял. Прямо сейчас это с 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

Вы усложняя вещи просто использовать этот скрипт

$('#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 2

использование JQuery, с этим, как код:

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

Answer 3

Если вы хотите 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 4

Вы можете нам сделать что-то вроде этого:

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);