How to I .append() user input inside a <div> tag?

How to I .append() user input inside a <div> tag?

本文关键字：div lt gt tag inside append to input user How      更新时间：2023-09-26
标签。

我正在尝试使联系人卡片出现在屏幕上，用户输入到标签中的名称。

这将需要我为背景颜色和大小做一个标记，然后.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>");
    });
});

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

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

try this

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

您需要获取变量的值并连接到字符串，像这样

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

因为您需要单独编写$('#f-name').val()以防止它被视为字符串而不是函数

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