如何为通过jQuery append方法添加的<input type='text'>元素赋值

我来帮你搞定这个动态添加输入框并赋值的问题～ 看你的需求应该是：点击「Add People」按钮后，把上方输入框里的邮箱值，添加到.people_invite容器的只读输入框中，而且这些只读输入框是通过jQuery动态生成的对吧？

下面是修正并完善后的完整代码：

HTML 部分（保留你原有结构即可） #

<input type="email" name="invite_people" placeholder="Invite someone">
<a href="#!" class="add_people">Add People</a>
<div class="people_invite">
<!-- 动态添加的<input type="text" name="people_invited" readonly>会在这里生成 -->
</div>

jQuery 部分（完整实现逻辑） #

$(".add_people").click(function () {
    // 1. 获取输入框里的邀请邮箱值，去掉前后空格避免无效输入
    var inviteValue = $("input[name='invite_people']").val().trim();
    
    // 2. 判断输入值是否为空，避免生成空的只读输入框
    if (inviteValue) {
        // 3. 创建新的只读输入框，同时设置属性和赋值
        var newInput = $("<input>")
            .attr("type", "text")
            .attr("name", "people_invited")
            .attr("readonly", true)
            .val(inviteValue); // 这就是给动态元素赋值的核心步骤
        
        // 4. 把新输入框添加到目标容器中
        $(".people_invite").append(newInput);
        
        // 可选：清空原输入框，方便继续输入下一个邀请对象
        $("input[name='invite_people']").val("");
    }
});

关键细节说明： #

• 精准获取输入值：用name属性定位输入框比用type更可靠，trim()能过滤掉用户不小心输入的前后空格。
• 动态元素赋值时机：在创建新输入框的同时直接用.val()赋值，是最直接的方式，不需要等元素插入DOM后再操作。
• 非空校验：避免用户误点按钮生成空的输入框，提升交互体验。
• 后续修改动态元素值：如果之后需要修改已添加的输入框值，可以通过索引定位，比如$(".people_invite input[name='people_invited']").eq(0).val("新的邮箱地址")，eq(0)代表第一个动态添加的输入框，按需调整索引即可。

内容的提问来源于stack exchange，提问作者Bariq Dharmawan