How to append to an element and set text for multiple times

Question

I have a list of elements where I want to create list like structure with the Bootstrap element (example):

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

I figured that I will do something like:

foreach(element)
{
   $("#ul").append($("<a href='" + element +"'>").text(element));
}


<div class="container">
  <div id="ul" class="list-group">
</div>

This works fine but I am not sure how to do the other nested elements (<h4> and <p>) and also set their text property. Also is there a cleaner way to do the href part of <a> element ? Any hints and tips are appreciated.

@Vohuman I used that as a shortcut just to describe my problem — Cemre Mengü, Oct 14 '14 at 21:13

score 3 · Accepted Answer · answered Oct 14 '14 at 21:03

You need to build those elements individually and append them after you've already operated on them:

foreach(element)
{
  var anchor = $("<a href='" + element +"'>");
  var header = $('<h4>').text('stuff');
  var p = $('<p>').text('More stuff');
  anchor.append(header).append(p);
  $("#ul").append(anchor);
}

score 1 · Answer 2 · edited May 23 '17 at 11:49

1

As far as the main question goes, Brennan's answer will definitely do the trick. As for another way to do the href in your <a>, check out this post.

edited May 23 '17 at 11:49

Community

1
1

answered Oct 14 '14 at 21:21

WillFole

11
3

How to append to an element and set text for multiple times

2 Answers2