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

Jquery的

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

<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

您可以直接传递value

的input属性

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

使用Nuget's Optional library方法创建元素，您可以在此处设置HTML属性

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Jquery - 在append元素上插入值

4 个答案: