Appending child nodes on a div

Question

Im trying to add items into a div element based on elements from an array. The element I'm trying to add already exists on the page. Basically I'm trying to just create a new version of it and add it to the div.

The code might help explain things further.

JavaScript:

function apply(list) { var item = $("#it_template").children("md-list-item").eq(0); for(var i = 0; i < list.uuids.length; i++){ var uid = list.uuids[i]; item.children("p").eq(0).html(uid); $("#items").append(item); } }

HTML:

<div id="items"> </div> <div style="display:none" id="it_template"> <md-list-item md-ink-ripple class="list_item"> <p></p> </md-list-item> </div>

It seems to be faulty somewhere, since whenever I'm running the code I'm only seeing one item being added to the div.

Can you please help me out with where the error is?

What is list.uuids? Please show all the relevant code. Also, a JSFiddle with some markup would be nice. — Hanlet Escaño
– Hanlet Escaño, Commented Jul 14, 2016 at 18:48
@MarcB at least not now but custom tags are part of the live standard. But has to be registered with document.registerElement('md-list-item'); — t.niese
– t.niese, Commented Jul 14, 2016 at 18:51
@MarcB It might be a library like Polymer which is roughly similar to the official Web Components spec. — gcampbell
– gcampbell, Commented Jul 14, 2016 at 18:52

user94559 · Accepted Answer · 2016-07-14 18:49:52Z

Try this? The important change is cloning the node instead of trying to append it over and over. (A node can only have one parent, so it will just get moved instead of copied.)

Another change I made was to use .text instead of .html. If you're dealing with text, this is generally much better. (Importantly, it reduces your risk of XSS vulnerabilities.)

function apply(list) { var item = $("#it_template").children("md-list-item").eq(0); for(var i = 0; i < list.uuids.length; i++) { var uid = list.uuids[i]; var newItem = item.clone(); newItem.children("p").eq(0).text(uid); $("#items").append(newItem); } }

user94559 · Accepted Answer · 2016-07-14 18:52:15Z

Unless you are Using Angular Material, <md-list-item> is an invalid tag. Sorry, i am not sure what you are attempting to do but if you want to fill something with a collection of somethings and you want to use Angular. Check out NG-REPEAT directive.

Collectives™ on Stack Overflow

Appending child nodes on a div

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related