Jquery - Make元素不断追加而不是替换它

Question

我想制作一些邀请名单＆＃39;。当我们输入其他人的电子邮件并点击添加按钮时，我们输入的电子邮件会显示在底部。我的代码如下所示：

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);
        });

它刚刚起作用。但它只是在我们添加人员时才第一次起作用。当我们再次添加人员时，第一个添加列表人员＆＃39;被我们添加的最后一个替换。我想要的是每个<span class="people_added">内部都有不同的文字。比如bitbucket

不喜欢（我的结果）

请帮帮我:)。

Answer 1

您的代码问题是这一行：

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

此选择器仅在第一次是唯一的。之后你有更多的people_added类跨度 - 所以你要为所有这些跨度分配新的文本。

您可以在创建新元素时附加新元素的文本，例如：

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

它将产生以下元素：<div>myText</div>

您可以使用以下方法解决问题：

$(".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

问题在于这一行

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

它的作用是用新值覆盖整个span元素而不是你做的是将它添加到追加函数中

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

    });

点击此处jsfiddle