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>

查詢

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

在<div class="people_invite">添加<input type="text" name="people_invited" readonly> <div class="people_invite"> ，但我想讓<input type="text" name="people_invited" readonly>有一個值來自var orang_yg_diinvite 。 我怎樣才能做到這一點？ 請幫我 ：）

Answer 1

有多種方法可以做到這一點：

只需將其直接添加到您要附加的輸入的 HTML 中

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

或者

附加后編輯輸入的值

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

Answer 2

您可以直接傳入input value屬性

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

 <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>

Answer 3

使用jQuery( html, attributes )方法創建元素，在這里你可以設置 HTML 屬性

var input = $("<input/>", { type: 'text', value : orang_yg_diinvite})
$(".people_invited").append(input);

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

 <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"> <!-- Here is <input type="text" name="people_invited" readonly> is added by jquery --> </div>

Answer 4

您還可以在附加輸入字符串時添加value和readonly屬性。

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