jquery动态添加带有样式的HTML标签元素

如下图所示：

table class=' exhibit _ table ' style=' font-size :13 px；' text-align : left；'tr td style=' width:80px'Align='right '上传计划订单/TD TD TD style=' padd :10 px；'输入类型=' file ' name=' file ' style=' display : inline；宽度width:180px'/button type=' button ' class=' BTN BTN-success BTN-xs ' style=' border-radius :4 px；边距-top :-5px；边距-left :-4px；'onclick=' plus file()' I class=' icon-plus icon-on-right-bigger-110 '/I add/button/TD/tr TD/TD TD style=' padd :10 px；'div id=' other file '/div/TD/tr/table想要的功能是在点击“添加”按钮时，在上传计划表单下方添加一个上传计划表单的文件上传表单，新添加的文件上传表单后面有一个“删除”按钮。当点击“删除”按钮时，可以删除新添加的文件上传表单。效果如下图所示：

单击“添加”按钮后，您可以添加上传附件的表单和删除按钮。效果如下图所示：

当您点击“删除”按钮时，新添加的上传附件表单和该删除按钮将被一起删除，效果如下图所示：

实现上述效果的代码是：将一个点击事件绑定到“添加”按钮：onclick='plusFile()'，点击“添加”按钮时，会触发plusFile()函数。该函数用于通过$('#otherFile ')获取id为otherFile的div，然后通过jquery的append函数向该div添加HTML元素。要添加的HTML元素有：

p style=' margin-top :-2px；'输入类型=' file ' name=' file ' style=' display : inline；宽度width:180px'/button type=' button ' class=' BTN BTN-danger BTN-xs ' style=' border-radius :4 px；边距-top :-5px；'onclick=' delete current(this)' I class=' icon-trash icon-on-right-bigger-110 '/I delete/button/p函数如下代码所示：

/* * * * *输入类型=' file ' name=' file ' style=' display : inline；宽度width:180px/button type=' button ' class=' BTN BTN-danger BTN-xs ' style=' border-radius :4 px；边距-top :-5px；onclick=' delete current(this)' I class=' icon-废纸篓icon-on-right bigger-110 '/I delete/button/p ')；}然后将click事件绑定到“delete”按钮：onclick=“delete current(this)”。当点击“删除”按钮时，将触发删除当前(this)功能。这个函数的作用是首先接收这个传递的参数，然后通过$(obj)获取delete button的对象，再通过$(obj)获取delete button的父元素。parent()，即p的新添加元素，最后通过jquery的remove()函数删除这个p元素。

功能代码如下：

/* * * }这就完成了上述所需的功能。

上述在jquery中动态添加带有样式的HTML标签元素的方法是边肖与大家分享的全部内容。希望能给大家一个参考，支持我们。