Question

我正在尝试使用用户输入标签的名称在屏幕上显示联系人卡片。

这将要求我为背景颜色和大小制作标签，然后.append（）用户在该div内部的输入。它还需要能够再次单击该按钮并创建第二个或第三个具有唯一信息的联系人卡片。

HTML ...

<form>
     <h3>First name: <input id="f-name" class="border-rad" type="text"></input></h3>
     <h3>Last name: <input id="l-name" class="border-rad" type="text"></input></h3>
     <h3 id="description-h3">Description:</h3>
     <textarea class="border-rad" rows="10" cols="40"></textarea>
</form>

...的jQuery

$(document).ready(function(){
    $("button").click(function(){
    $("#inner-div").append("<div id='contact-cards'>$('#f-name').val())</div>");
    });
});

Answer 1

我建议你创建一个新的jquery DOM对象：

$(document).ready(function(){
    $("button").click(function(){
        $("#inner-div").append($('<div />', {id: 'contact-cards', text: $('#f-name').val()}));
    });
});

Answer 2

试试这个

$(document).ready(function(){
    $("button").click(function(){
        $("#inner-div").append("<div id='contact-cards'>" + $('#f-name').val() + "</div>");
    });
});

在JavaScript中，“”或“”表示字符串，这就是您的代码不起作用的原因。

$("#inner-div").append("<div id='contact-cards'>$('#f-name').val())</div>");

你需要获取变量值和concat到string，就像这样。

"<div id='contact-cards'>" + $('#f-name').val() + "</div>"

Answer 3

因为您需要单独编写 $（'＃f-name'）。val（）以防止将其视为字符串而不是函数

$(document).ready(function(){
    $("button").click(function(){
    $("#inner-div").append("<div id='contact-cards'>"+$('#f-name').val()+"</div>");
    });
});

如何在<div>标签内添加.append（）用户输入？

3 个答案: