插入HTML元素的節點

我並不完全專注於JavaScript，所以我需要在腳本的實現中提供一點幫助。請原諒這樣一個問題的noob級別。我會告訴你這個形象，給你的我想要什麼總體思路：插入HTML元素的節點

因此，在短期而言，「+」號會添加其他成分股利和減號會刪除一個。我嘗試了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而不僅僅是文本？

來源

2015-10-04 Irfan Dahir

不要把'[解決''在標題中。接受答案是你如何表明它已被解決。 – Barmar

哦，我的壞。 o.o –

你是一個複雜的事情簡單地使用這個腳本

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

來源

2015-10-04 03:45:11 Pramod

這個很有效率，我會用這個。 o.o –

使用jQuery，與此類似的代碼：

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

來源

2015-10-04 03:43:42

這也適用，除非我不需要克隆它，因爲它們具有不同的ID。我解決了它，謝謝。 –

如果你想在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>';

來源

2015-10-04 03:43:51 Barmar

啊，我明白了。我認爲還有其他的功能，我找不到。 –

您可以我們做這樣的事情：

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

來源

2015-10-04 03:46:03 Cyril

插入HTML元素的節點

回答

相關問題