insert new element after previous added elements

Question

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.

Answer 1

$(".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>' );
});

Answer 2

您可以使用jquery Append函数，该函数附加在您的情况下为var x的文本末尾