1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="jquery-3.2.1.js"></script> 7 </head> 8 <body> 9 <div id="outer"> 10 <div id="item"> 11 <input value="+" type="button" onclick="add(this)"> 12 <input type="text" size="10px"> 13 </div> 14 </div> 15 <script> 16 function add(ev) { 17 var copyer=$(ev).parent().clone(); // 设置一个变量等于要拷贝的内容,找到此标签的父级,clone()克隆. 18 copyer.children(":button").attr("value","-").attr("onclick","del(this)"); //按设定需求 把克隆内容里的value和onclick事件改变 19 $("#item").after(copyer); // 或者用$("#outer").append(copyer); 一个是找到兄弟的加入同级标签,一个是找到父级标签 20 //加入的方法也不同 21 } 22 function del(ev) { 23 $(ev).parent().remove() 24 } 25 </script> 26 </body> 27 </html>
本例是为了用jquery实现标签的添加,并改变元素.点加号可以增加复制的input标签,但是属性已经被改变,这里用到了colne()克隆方法;如果点减号,则删除了添加的本行.