用JQUERY增删元素的代码

用JQUERY增删元素JQuery有增加和删除元素的方法。主要分为内部插入，外部插入，包裹，替换，删除。内部插入主要方法：append(content) 向每个匹配的元素内部追加内容。prepend(content) 向每个匹配的元素内部前置内容。外部插入：after(content) 在每个匹配的元素之后插入内容。before(content) 在每个匹配的元素之前插入内容。删除：empty() 删除匹配的元素集合中所有的子节点。remove([expr]) 从DOM中删除所有匹配的元素。下面的例子是点击增加按钮表格就会在最后一行插入新的一行再点击删除按钮删除最后一行复制代码代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>表格元素增删</title> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <style type="text/css"> body{ font-size:12px;} </style> <script type="text/javascript"> /* 添加预测 */ function add_tr() { $("#table1").append("<tr>" + $("#table1 tr").eq(0).html() + "</tr>"); } /* 删除预测 */ function remove_tr() { //alert($("#table1 tr").last().html()); if ($("#table1 tr").size() > 1) { $("#table1 tr:last-child").remove(); } else alert("这是最后一行,无法再删除"); } </script> </head> <body align='center'> <center> <table id='table1'> <tr> <td width='150'>第一格</td> <td width='250'><input type='text'/></td> </tr> </table> <br/> <input type='button' value='增加一行' onclick='add_tr()' /> <input type='button' value='删除最后一行' onclick='remove_tr()' /> </center> </body> </html>

　　推荐阅读

　　情人节之礼 js项链效果

第一个项链实现原理将img的src属性设为同一张图片效果图：复制代码代码如下: <!DOCTYPE html> <html> <head> <title>项链</title> <style type="text/css"> *{margin: 0px;padding: 0px;} .cont{width: 1100px;>>>详细阅读

本文标题：用JQUERY增删元素的代码

地址：http://www.17bianji.com/kaifa2/JS/23629.html

1/2 1