jquery - Jquery - 使元素连续追加而不是替换它

Question

我想做一些“邀请名单”。当我们输入其他人的电子邮件并单击添加按钮时，我们输入的电子邮件显示在底部。我的代码如下所示：

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

它刚刚奏效。但它仅在我们添加人员时才第一次起作用。当我们再次添加人员时，第一个“添加列表人员”将替换为我们添加的最后一个。我想要的是每个<span class="people_added">里面都有不同的文本。像bitbucket这样的东西

不是那样（我的结果）

请帮我 ：）

Answer 1

问题是这条线

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

它的作用是用新值覆盖整个 span 元素，而不是像这样将它添加到 append 函数中

$(".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上的链接

Answer 2

您的代码的问题是这一行：

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