CODEWITHSUNDEEP
javascriptjqueryhtml
roanjain
roanjain

Reputation: 1252

insert new element after previous added elements

JavaScript 

$(".display_box").on('click', function () {
    var name = $(this).attr("data-name");
    var x = document.getElementById('added-people').innerHTML;
    $("name").insertAfter(x);
});

HTML

<div id="added-people" 
    style="margin-left:1%;
           min-height:15px;
           width:71.7%;
           background:#f2f4f5;
           font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
           font-size: 9px;color: #212121;">
</div>

The display box is generated using a while loop. So, when a display box is clicked, its name is fetched and displayed in the 'added-people' div. I want that when a display box is clicked again, the fetched name should display next to the previous one and so on.

Upvotes: 0

Views: 72

Answers (2)

MayankSingh
MayankSingh

Reputation: 27

You can use jquery Append function which appends at the end of text which is var x in your case

Upvotes: 0

Patrick Moore
Patrick Moore

Reputation: 13344

$(".display_box").on('click', function () {
    var name = $(this).data("name") // use .data() to grab data-name
    var x = $("#added-people") // $("#id") same as document.getElementById('id')
    x.append( '<span>' + name + '</span>' );
});

Upvotes: 3

Related Questions