Inserting Nodes of HTML Elements

Question

I don't exactly specialize in javascript so I need a tad of a help in an implementation of a script. Excuse the noob level of such a question. I'll show you this image to give you a general idea of what I want:

So in short terms, the '+' sign would add another ingredient div and the minus would remove one. I tried DOM Nodes except there's a tiny part I got stuck at. Right now this is with jquery so;

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

I want to append that HTML script however not in a text form, rather in the HTML form. I've tried document.write() but that re-write the whole page.

So how can I make it insert the HTML rather then just the text?

Don't put [solved] in the title. Accepting an answer is how you indicate that it was solved. — Barmar
– Barmar, Commented Oct 4, 2015 at 4:04

Barmar · Accepted Answer · 2015-10-04 03:43:51Z

3

If you want the HTML to be interpreted, assign it to .innerHTML, don't create a text node.

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

answered Oct 4, 2015 at 3:43

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Irfan Over a year ago

Ah, I see. I thought there was some other function for it which I couldn't find.

Pramod · Accepted Answer · 2015-10-04 03:45:11Z

2

You are complicating a things simply use this script

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

answered Oct 4, 2015 at 3:45

Pramod

6521 gold badge10 silver badges22 bronze badges

1 Comment

Irfan Over a year ago

This one's efficient, I'll go with this. o.o

Ebrahim Golkhani · Accepted Answer · 2015-10-04 03:43:42Z

1

use jquery , with this like code:

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

answered Oct 4, 2015 at 3:43

Ebrahim Golkhani

7110 bronze badges

1 Comment

Irfan Over a year ago

This works too except I don't need to clone it since they have different IDs. I've solved it tho, thanks.

Cyril Cherian · Accepted Answer · 2015-10-04 03:46:03Z

You can us do something like this:

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

Collectives™ on Stack Overflow

Inserting Nodes of HTML Elements

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related