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">里面都有不同的文本。 像位桶之類的東西

不喜歡（我的結果）

請幫我 ：）

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元素，而不是像這樣將其添加到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