I have a DIV. I want to dynamically generate a bulleted list inside the DIV using jQuery with a items list I have with me
for (cnt = 0; cnt < someList.length; cnt++) {
someList[cnt].FirstName + ":" + someList[cnt].LastName + "<br/>"
// what to write here?
}
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
Unordered list or Bulleted list (ul) Ordered list or Numbered list (ol) Description list or Definition list (dl)
<ul>: The Unordered List element. The <ul> HTML element represents an unordered list of items, typically rendered as a bulleted list.
The quickest way to display a list on a single line is to give the <li> elements a display property value of inline or inline-block . Doing so places all the <li> elements within a single line, with a single space between each list item.
Keeping things as simple as possible. Using your existing javascript, You would just need to add this:
$('#myDiv').append("<ul id='newList'></ul>");
for (cnt = 0; cnt < someList.length; cnt++) {
$("#newList").append("<li>"+someList[cnt].FirstName + ":" + someList[cnt].LastName+"</li>");
}
Since your HTML already has the DIV:
<div id="myDiv"></div>
Script:
$(function(){
someList = [ {FirstName: "Joe", LastName: "Smith"} ,
{FirstName: "Will", LastName: "Brown"} ]
$("#target").append("<ul id='list'></ul>");
$.each(someList, function(n, elem) {
$("#list").append("<li>" + elem.FirstName + " : " + elem.LastName + "</li>");
});
});
and html:
<div id="target" />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With