javascript - 如何在 <div> 标签内 .append() 用户输入?

标签 javascript jquery html css

<分区>

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

这需要我为背景颜色和大小制作一个标签,然后 .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()}));
    });
});

关于javascript - 如何在 <div> 标签内 .append() 用户输入?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33286133/

相关文章:

javascript - 如何动态创建参数名称

javascript - node.js ejs 在 ajax 之后渲染 div

html - 防止 iOS 上的溢出/橡皮筋滚动

html - Bootstrap 列等高问题

javascript - 搜索在多个 javascript 文件中使用一个 mongodb 连接的最佳实践

javascript - Codeigniter 中的 tcpdf 不起作用

javascript - 无法让 typeahead.js 工作

javascript - 使用 Socket.io 实时更新 Highcharts

javascript - 如何获取所有已注册的 Vuex 模块

html - 如何自定义 bootstrap 下拉列表?