javascript - Jquery - 在追加元素上插入值

Question

如何在 <input type="text"> 上插入值但这个元素来自append方法。这是代码

HTML

<input type="email" name="invite_people" placeholder="Invite someone">
  <a href="#!" class="add_people">Add People</a>
  <div class="people_invite">
    <!-- Here is <input type="text" name="people_invited" readonly> is added by jquery -->
  </div>

Jquery

$(".add_people").click(function () {
   var orang_yg_diinvite = $("input type='text' name='invite_people'>").val();
   $(".people_invite").append("<input type='text' name='people_invited' readonly>");
});

追加<input type="text" name="people_invited" readonly>成功里面<div class="people_invite"> ，但我想做<input type="text" name="people_invited" readonly>具有来自 var orang_yg_diinvite 的值。我怎样才能做到这一点？请帮助我:)

Answer 1

有多种方法可以做到这一点:

Just directly add it to the HTML of the input you're appending

$(".people_invited").append("<input type='text' value='"+orang_yg_diinvite+"'>");

或者

Edit your input's value after it was appended

$(".people_invited").append("<input type='text'>");
$(".people_invited>input").val(orang_yg_diinvite);

演示:

$(".add_people").click(function () {
   var orang_yg_diinvite = $("input[name='invite_people']").val();
   $(".people_invited").append("<input type='text' value='"+orang_yg_diinvite+"'>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="email" name="invite_people" placeholder="Invite someone">
<a href="#!" class="add_people">Add People</a>
<div class="people_invited">
</div>