jquery append nested elements

Question

I need to append nested element to the page

I am using the append function, but running into an error trying to pass an array to it.

<div id="area">
</div>

var data = [{"class":"a", "href":"http://google.com"}, {"class":"b", "href":"http://yahoo.com"}];

$('#area').append(
    $('<ul>').append(
        $(data).each(function(i, val) {
            $('<li>', {class: val["class"]}).append(
                $('<a>', {href: val["href"]})
        })
    )
)

When I do this I get an error on the input of the append function because I am passing .each. I need to do this dynamically based on a given array to add a set of nested elements so in the end it would be.

<div id="area">
    <ul>
        <li class="b">
            <a href="http://yahoo.com"></a>
        </li>
        <li class="a">
            <a href="http://google.com"></a>
        </li>
    </ul>
</div>

So I am wondering how to pass .each to append, or do something similar in a different way.

Thanks to all in advanced!

your mark up is invalid child of UL should be an LI then you have have the span with anchor in it — guradio
– guradio, Commented Jun 3, 2016 at 4:16
haha i just saw that thanks, fixed it! That's not the issue here — poutyboi
– poutyboi, Commented Jun 3, 2016 at 4:17
append takes an array of DOM elements not a a plain object. You need to iterate over the array and append the items inside that loop. — TeaCoder
– TeaCoder, Commented Jun 3, 2016 at 4:21

guradio · Accepted Answer · 2016-06-03 04:19:45Z

1

var data = [{
  "class": "a",
  "href": "http://google.com"
}, {
  "class": "b",
  "href": "http://yahoo.com"
}];
var ul = $('<ul/>'); //create the ul
$(data).each(function(i, val) { //loop the data
  ul.append('<li class=' + val.class + '><a href=' + val.href + '>' + val.href + '</li>'); //append each value on li the class and href
  $('#area').append(ul) //append the ul to the div
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="area">
</div>

answered Jun 3, 2016 at 4:19

guradio

15.6k4 gold badges39 silver badges65 bronze badges

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

2 Comments

poutyboi Over a year ago

Thank you so much, very helpful!!

guradio Over a year ago

@user1807880 glad to help mate happy coding :)

T J · Accepted Answer · 2016-06-03 04:37:17Z

1

Nothing in your code is appending the <li>s to <ul> because $(data).each returns the data array wrapped in jQuery object.

You should use $.each to iterate over non-jQuery objects, and always try to cache references and do manipulations in memory before attaching to DOM.

Note that unlike the other answer, below code manipulates the actual DOM only once.

var data = [{
  "class": "a",
  "href": "http://google.com"
}, {
  "class": "b",
  "href": "http://yahoo.com"
}];
var $ul = $('<ul>');
$.each(data, function(i, val) {
  var $li = $('<li>', {
    class: val["class"]
  });
  $li.append(
    $('<a>', {
      href: val["href"],
      text: val["href"]
    }));
  $ul.append($li);
});
$('#area').append($ul);
//--------^--- one time DOM manipulation

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="area">

</div>

edited Jun 3, 2016 at 4:37

answered Jun 3, 2016 at 4:23

T J

43.2k13 gold badges87 silver badges142 bronze badges

2 Comments

poutyboi Over a year ago

Thank you so much, very helpful!! Got one little q. Say I want to make the href a xlink:href, custom attribute. How do I do so. Defining it like $('<a>', { xlink:href: 'google.com' });

T J Over a year ago

@user1807880 simply changing href to "xlink:href" (with quotes) seems to work fine?

Collectives™ on Stack Overflow

jquery append nested elements

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related