这次给大家带来jquery添加带有样式的html标签，jquery添加带有样式的html标签的注意事项有哪些，下面就是实战案例，一起来看一下。
如下所示：
<table class="exhibit_table" style="font-size:13px; text-align:left;"> <tr> <td style="width:80px;" align="right">上传计划单</td> <td style="padding:10px;"><input type="file" name="file" style="display:inline; width:180px;"/> <button type="button" class="btn btn-success btn-xs" style="border-radius:4px; margin-top:-5px; margin-left:-4px;" onclick="plusfile()"> <i class="icon-plus icon-on-right bigger-110"></i>添加 </button> </td> </tr> <tr> <td></td> <td style="padding:10px;"><p id="otherfile"></p></td> </tr> </table>
希望实现的功能是：当点击“添加”按钮时，在上传计划单的下面再增加一条上传计划单的文件上传表单，且新增的文件上传表单后面有一个“删除”按钮，当点击“删除”按钮时，可将刚刚新增的文件上传表单删除掉。
点击“添加”按钮后，可以新增一个上传附件的表单，以及一个删除按钮
点击“删除”按钮时，新增的上传附件表单以及此删除按钮，将一并被删掉
实现上面效果的代码是：给“添加”按钮上绑定一个点击事件：onclick="plusfile()"，当点击“添加”按钮时，将触发plusfile()函数。函数的作用是：首先通过$("#otherfile")获取id是otherfile的p，然后通过jquery的append函数，为此p添加html元素，所要添加的html元素为：
<p style='margin-top:-2px;'> <input type='file' name='file' style='display:inline; width:180px;'/> <button type='button' class='btn btn-danger btn-xs' style='border-radius:4px; margin-top:-5px;' onclick='deletecurrent(this)'> <i class='icon-trash icon-on-right bigger-110'></i>删除 </button> </p>
函数如下代码所示：
/**********添加多文件上传************/ function plusfile(){ $("#otherfile").append("<p style='margin-top:-2px;'><input type='file' name='file' style='display:inline; width:180px;'/><button type='button' class='btn btn-danger btn-xs' style='border-radius:4px; margin-top:-5px;' onclick='deletecurrent(this)'><i class='icon-trash icon-on-right bigger-110'></i>删除</button></p>"); }
然后再给“删除”按钮绑定一个点击事件：onclick='deletecurrent(this)'，当点击“删除”按钮时，将触发deletecurrent(this)函数。此函数的作用是：首先接收this传递过来的参数，然后通过$(obj)获取“删除”按钮所在的对象，再通过$(obj).parent()获取“删除”按钮的父元素，即<p>新增的元素，最后通过jquery的remove()函数，将此<p>元素删除掉。
函数代码如下所示：
/**********删除多文件上传***********/ function deletecurrent(obj){ $(obj).parent().remove(); }
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
jquery怎样做出碰到框框边缘即可反弹的动画效果
radio的动态控制选中失效应该怎么解决
解决easyui在ie不兼容的方法
以上就是jquery添加带有样式的html标签的详细内容。