CODEWITHSUNDEEP
javascriptjquery
Karlom
Karlom

Reputation: 14854

How to append links to ul in a loop using jQuery?

I have an array of users which I'd like to add to a ul list . The code works fine when I add users to the list as li elements:

users = ['Bob','Mary', 'Mike']
var ul = $('<ul></ul>');
users.forEach(function (user) {
 ul.append($('<li><strong><strong></li>').text(user));
});
$('#users').html(ul);

But what I want is to add users as hyperlinked texts so that thay can be clicked, so for example I'd like Bob to be rendred as:

<li><strong><a href='#' id="Bob">Bob</a><strong></li>

But whatever I tried I could not append the a elements to ul as above. Appreciate your help.

Upvotes: 1

Views: 814

Answers (2)

Luca Kiebel
Luca Kiebel

Reputation: 10096

This seems like a good example to start using template strings, these are strings, you can easily add variables to:

users = ['Bob','Mary', 'Mike']
var ul = $('<ul></ul>');
users.forEach(function (user) {
  ul.append($(`<li><strong><a href="#" id="${user}">${user}</a></strong></li>`));
});
$('#users').html(ul);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="users"></div>

Upvotes: 2

APAD1
APAD1

Reputation: 13666

You can just concatenate using the + operator:

users = ['Bob','Mary', 'Mike']
var ul = $('<ul></ul>');
users.forEach(function (user) {
  ul.append($('<li><strong><a href="#" id="' + user + '">' + user + '</a></strong></li>'));
});
$('#users').html(ul);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="users"></div>

Upvotes: 2

Related Questions