How to add Html element to dynamic list in jquery

Question

I am new to web programming.Actually I want to create a list in that I have to add elements dynamically to unordered list.I added elements in list dynamically but I have to anchor tag to that each list item.please help me

HTML:

<div data-role="main" class="ui-content">        
    <input type="button" id="btnid" onclick="getData()"/>
    <p id="p1">
        Insert Content Here working
    </p>
    <ul data-role="listview" data-inset="true" id="ulist"  title="nodes list" data-inset="true">                        
    </ul>
</div>

JavaScript:

for (var i = 0; i < jsonData.Element.length; i++) {
    var counter = jsonData.Element[i];
    //console.log(counter.counter_name);
    var newelement=$("<li>"+counter.nodeName+" "+counter.activeCount+" "+counter.inactiveCount+"</li>");                    
    newelement.appendTo("#ulist");                  
    //  alert(counter.nodeName);            
}

you wanr UI like as below, Right? <ul><li><a></a></li><li><a></a></li></ui>. — Jayesh Goyani
– Jayesh Goyani, Commented Apr 22, 2014 at 5:01
yes i want like <li><a href="#">link</a></li><li><a href="#">link</a></li> — skyshine
– skyshine, Commented Apr 22, 2014 at 5:02
counter is already a nodeName I think you wish to use nodeValue ?? — Bhojendra Rauniyar
– Bhojendra Rauniyar, Commented Apr 22, 2014 at 5:06

Jayesh Goyani · Accepted Answer · 2014-04-22 05:11:26Z

1

Try with this.

$("<li><a href='#'>"+counter.nodeName+" "+counter.activeCount+" "+counter.inactiveCount+"</a></li>").appendTo("#ulist");

Please try with above code snippet. Let me know if you want to set URL based on your field's value.

edited Apr 22, 2014 at 5:11

answered Apr 22, 2014 at 5:05

Jayesh Goyani

11.2k11 gold badges32 silver badges50 bronze badges

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

6 Comments

skyshine Over a year ago

working but how to replace # to some html page for every element

Jayesh Goyani Over a year ago

Can you please provide sample URL? You want to set the URL based on 'node' field's value?

skyshine Over a year ago

suppose for first element I want set # to one.html for second # to two.html like this how to set for different to all elements

Jayesh Goyani Over a year ago

You want like, yourURL#1, yourURL#2, yourURL#3.

WASasquatch Over a year ago

Make an array of URLs, and use your i to append the URL value to each element. If you don't already have this data in the array. <a href='"+urls[i]+">. See my updated answer.

|

WASasquatch · Accepted Answer · 2014-04-22 05:18:43Z

0

Using jQuery, you can do something like the following which I quickly wrote here. Using jQuery's built in each() function which iterates through an object, or an array for you, without establishing a four loop

var list = $('#ulist'),
    urls = new Array('one.html', 'two.html', 'three.html', 'four.html'),
    i = 0;
jsonData.each(function(k,v) {

    var node = v;
    list.append("<li><a href='"+urls[i]+"' title='"+node.nodeName.+"'>"+node.nodeName+" "+node.activeCount+" "+node.inactiveCount+"</a></li>");
    i++;

});

This will iterate through the array, giving you the key, and value (v being the value which holds your array of data) and allows you to append your data.

edited Apr 22, 2014 at 5:18

answered Apr 22, 2014 at 5:02

WASasquatch

1,0443 gold badges11 silver badges19 bronze badges

2 Comments

skyshine Over a year ago

I need html element in middle for every list item

WASasquatch Over a year ago

What does that mean? This is your array, I just changed the var name.

Collectives™ on Stack Overflow

How to add Html element to dynamic list in jquery

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related