jQuery-使元素连续追加而不是替换

Question

I wanna make some 'invitation list'. When we type other people email and click the add button , email we type is show on the bottom. The code from me is looks like below:

HTML

<input type="email" name="invite_people" placeholder="Invite someone">
<a href="#!" class="add_people">Add</a>

<div class="people_invited">
   <!--
      this element
    <div>
       <span class="people_added"></span>
    </div>
      is added by Jquery
   -->
</div>

Jquery

$(".add_people").click(function () {
            var orang_yg_diinvite = $("input[name='invite_people']").val();
            $(".people_invited").append("<div><span class='people_added'></span></div>");
            $("span.people_added").text(orang_yg_diinvite);
        });

It just worked. But it worked only for the first time when we add people. When we add people again, the first 'add list people' is replace by the last we add. What I want is each <span class="people_added"> is have different text inside of it. Something like bitbucket

not like that (My result)

Please help me :)

Answer 1

The problem of your code is this line:

$("span.people_added").text(orang_yg_diinvite);

This selector is unique only the first time. Later you have more spans with people_added class - so you are assigning new text to all of these spans.

You can append the text for the new element while you are creating it, like:

var divInnerText = "myText";
var newDiv = $("<div>" + divInnerText + "</div>");

It will produce the following element: <div>myText</div>

You can solve your problem using this approach:

$(".add_people").click(function () {
    var orang_yg_diinvite = $("input[name='invite_people']").val();
    $(".people_invited").append("<div><span class='people_added'>" + orang_yg_diinvite + "</span></div>");
});

Answer 2

The problem was this line

$("span.people_added").text(orang_yg_diinvite);

What it does is it overwrites the whole span elements with new value instead what you do is add it to the append function like this

$(".add_people").click(function () {
        var orang_yg_diinvite = $("input[name='invite_people']").val();
        $(".people_invited").append("<div><span class='people_added'>"+orang_yg_diinvite+ "</span></div>");

    });

link here on jsfiddle