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