点击按钮，动态添加信息Jquery

最新推荐文章于 2023-07-17 10:27:13 发布

原创最新推荐文章于 2023-07-17 10:27:13 发布 · 454 阅读

0 ·

CC 4.0 BY-SA版权

web前端专栏收录该内容

47 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript动态添加DOM元素的方法。通过点击按钮触发JS事件，实现向页面中添加包含图片上传、文本输入及删除按钮的新行。此方法适用于需要动态扩展表单或列表的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码：

</div>

js代码：

$(".add_new").on('click',function(){

var html = '<div class="col-md-12 col-sm-12 col-xl-12 one new ">'+
'<div class="col-md-4 col-sm-4 col-xl-4 one">'+
'<div class="new_img">'+
'<span class="fa fa-blind fa_img" style="font-size: 50px;"></span>'+
'<input type="file" id="file" style="display: none;">'+
'</div>'+
'</div>'+
'<div class="col-md-7 col-sm-7 col-xl-7 one">'+
'<textarea class="text" id="text"></textarea>'+
'</div>'+
'<div class="col-md-1 col-sm-1 col-xl-1 one">'+
'<div class="delete"><span class="fa fa-shopping-basket"></div>'+
'</div>'+
'</div>';
$(".new_details").append(html);

});

实际效果：