Adding HTML code using for loop in jquery

Question

I'm trying to add li elements in a html codes to a div element, following is my html code:

Place where the elements to be added:

<div class="form-body" id="nitspopupmenu"></div>

Elements of ul:

<div class="collapse navbar-collapse">
    <ul class="nav navbar-nav navbar-right" id="nitsmenu" data-nitspagelabel="1">
        <li class="scroll active"><a href="#navigation">Home</a></li>
        <li class="scroll"><a href="#aboutus">About Us</a></li>
        <li class="scroll"><a href="#services">Services</a></li>
        <li class="scroll"><a href="#ourteam">Our Team</a></li>
        <li class="scroll"><a href="#portfolio">Portfolio</a></li>
        <li class="scroll"><a href="#clients">Clients</a></li>
        <li class="scroll"><a href="#blog">Blog</a></li>
        <li class="scroll"><a href="#contact">Contact</a></li>
    </ul>
</div>

My Jquery code:

$(e).fadeIn(400);

$('#nitspagesorter').fadeIn(400).css({
    'top': mouseY,
    'left': mouseX
}).draggable();

$('#nitsmenubutton').hide();

var licount = $("#nitsmenu li").length;
for (i = 0; i < licount; i++) {
    var lielem = $("#nitsmenu li").text();
    var element = $(lielem).text();
    $("#nitspopupmenu").html("<div class='form-group'><div class='pagesmenu selected'><span><i class ='fa fa-bars'></i>" + lielem + "");
}

I'm poping up the content to popup box, I'm getting the li name properly but its showing only the last element i.e. Contact, $("#nitspopupmenu").html("<div class='form-group'><div class='pagesmenu selected'><span><i class ='fa fa-bars'></i>" + lielem + ""); is executing at last or might be replacing the content everytime and showing the last result

Please help

You overwriting the HTML of #nitspopupmenu on every iteration of the loop, hence only the last one is visible. I'm not sure what behaviour you're expecting to know what needs to be changed. — Rory McCrossan
– Rory McCrossan, Commented Apr 29, 2016 at 9:08
thats true its getting overwritten, it should add html everytime with the value of element, as I want to display all the elements. How can we overcome this? — Nitish Kumar
– Nitish Kumar, Commented Apr 29, 2016 at 9:10

Veshraj Joshi · Accepted Answer · 2016-04-29 09:12:40Z

11

I think you should use append() over html()

for (i = 0; i < licount; i++) {
    var lielem = $("#nitsmenu li").text();
    var element = $(lielem).text();
    $("#nitspopupmenu").append("<div class='form-group'><div class='pagesmenu selected'><span><i class ='fa fa-bars'></i>" + lielem + "");
}

You should put all string with in one line, if multiple lines required then concat with + sign

answered Apr 29, 2016 at 9:12

Veshraj Joshi

3,5874 gold badges32 silver badges51 bronze badges

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

Comments

Quentin · Accepted Answer · 2016-04-29 09:13:55Z

5

.html() replaces the content of the element, use .append() to add to it.

You also need to write valid HTML. You have three start tags that are missing their end tags there.

edited Apr 29, 2016 at 9:13

answered Apr 29, 2016 at 9:10

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

2 Comments

Nitish Kumar Over a year ago

.append dosen't accepts span tags. I mean I was having problem with span tag while executing this, even i tried wrapinner too.

Quentin Over a year ago

Span elements do not cause a problem with append: jsbin.com/qavuhor/2/edit?html,js,output

d4rty · Accepted Answer · 2016-04-29 09:12:39Z

1

See documentation for the .append() instruction. Using the .html()instruction will always delete all the content inside the element you have chosen. Using the .append() instruction appends the specified content at the end.

answered Apr 29, 2016 at 9:12

d4rty

4,2585 gold badges39 silver badges76 bronze badges

Collectives™ on Stack Overflow

Adding HTML code using for loop in jquery

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related