Dynamic Creation of Div inside an array and Appending data to it

Question

I am fetching result from database and i want too append it to dynamically created div.

for (j = 0; j <= 2; j++)
    {
        selected = $(".content" + (j + 1));
        ajax1(arr[j]);
    }
    function ajax1(pref) {
        $.ajax({
            async: false,
            url: "../handlers/guestpreference.ashx",
            data: { "pref": pref },
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: guestsuccess,
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.responseText);
                alert(thrownError);
            }
        });
    }
function guestsuccess(resultset)
    {       
       $.each(resultset, function (i, data) {
            $(selected).append('<div class="blogpost" >');
            $(".blogpost").append("<div class='blogposth'>");
            $(".blogpost").append("<div class='blogpostf'>");
            $(".blogposth").append('<font style="font-size:30px; color:blue;padding-left:10px;margin-top:10px;">' + data.Name + '</font>');
            $(".blogpostf").append('<font style="font-size:30px; text-align:centre;">' + data.Title + '</font><br>');
            $(".blogpostf").append('<font style="text-align:left;float:left;">' + data.Post + '</font><br>');
            $(".blogpostf").append('<hr>');
            var likes = data.Likes;
            if (likes > 0)
                $(".blogpostf").append('<font style="font-size:10px;text-align:left;float:left;">' + likes + ' &nbsp;people like it.</font><br>');
            else
                $(".blogpostf").append('<font style="font-size:10px;text-align:left;float:left;">Nobody like it.</font><br>');
            $(selected).append("<br>");

       });

    }

Here selected holds the class where i have to append .blogpost. this code is working fine if i have only 1 row of result but in case of multiple result the results are being appended to previously created div. Since i have CSS for .blogpost .blogposth .blogpostf how can i modify my code so that i can append value uniquely.

jsfiddle.net/mmpuov74/5 ideally, what is want is that it create three seperate divs but... — Nikhil Srivastava
– Nikhil Srivastava, Commented Apr 3, 2015 at 7:39

Nishit Maheta · Accepted Answer · 2015-04-03 07:50:53Z

1

create object of div which you append to "selected" . check demo on FIDDLE

   $blogpost = $('<div class="blogpost" ></div>'); 
   $blogpost.appendTo('#app');
   $blogposth = $("<div class='blogposth'><div>");
   $blogpost.append($blogposth);
   $blogpostf = $("<div class='blogpostf'><div>");
   $blogpost.append($blogpostf);


   $blogposth.append('<font style="font-size:30px; color:blue;padding-left:10px;margin-top:10px;">Name</font>');
   $blogpostf.append('<font style="font-size:30px; text-align:centre;">Title</font><br>');
   $blogpostf.append('<font style="text-align:left;float:left;">POST</font><br>');
   $blogpostf.append('<hr>');

edited Apr 3, 2015 at 7:50

answered Apr 3, 2015 at 7:32

Nishit Maheta

6,0413 gold badges20 silver badges32 bronze badges

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

3 Comments

Nikhil Srivastava Over a year ago

You have Written the code twice, what if i have to append it n number of times by for loop.

Nikhil Srivastava Over a year ago

Yeah I checked.. Its Working fine in the fiddle, but i dont know why even after using same codes in my system the values are being appended to previously created divs.. This is exactly what i want to do jsfiddle.net/mmpuov74/7 but its not working..

Nishit Maheta Over a year ago

M out for lunch .. Back in 30 min. Can you update fiddle you tried with my code

Collectives™ on Stack Overflow

Dynamic Creation of Div inside an array and Appending data to it

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related